簡單學習使用oAuth2方式進行三方登入

luckyzv發表於2019-02-16
OAuth

oAuth2 登入方式

本來公司專案是正常的使用者名稱、密碼登入，但是突然轉換成了第三方oAuth2方式登入，由此開始學習了該種登入形式。

思路

共有5種授權模式，有授權碼模式、簡化模式、密碼模式、客戶端模式，這裡只介紹授權碼模式，這大概是功能最完整、流程最嚴密的授權模式，大概也是使用最多的授權模式。

同普通的使用者名稱、密碼登入不同，oAuth2登入方式中，增加了一個授權層。使用者想要進行登入操作時，會被跳轉到授權伺服器上進行登入，在授權伺服器登入成功時，會觸發一個回撥函式重新回到當前使用者所在系統，之後執行後續操作。

這裡使用了simple-oauth2。正常的npm install simple-oauth2即可，想了解更詳細的使用方法，點選此傳送門便可瞭解。

配置資訊：

cosnt oauth2 = simpleOauth.create({
        "clientId": "<id>",
        "clientSecret": "<secret>",
        "tokenPath": "/oauth/access_token",
        "authorizePath": "/oauth/authorize"
    })

步驟：

（1）使用者點選登入按鈕。伺服器事先設定一個配置資訊如上所示，後臺通過下面的這個函式會得到一個Url，結果類似於/oauth/authorize/redirect_uri=http://localhost:3000/callback&client_id=&clientsecret=&response_type=code。

// /auth路由處理
const authorizationUrl = oauth2.authorizationCode.authorizeURL({
    redirect_uri: `http://localhost:3000/callback"
    // scope: `` 可有可無引數
    // state: `` 可有可無引數 可以自己任意填寫
})

（2）通過該Url，可以到達三方登入介面，使用者在三方登陸成功時，上面的redirect_uri就會被回撥，同時會附帶一個code在redirect_uri上，該code由三方登入伺服器提供，該code與客戶端Id和redirect_uri是一一對應的關係，回撥的url如/callback/code=。

// /callback路由處理
let code = req.query.code

oauth2.authorizationsCode.getToken(code, (err, result) => {
    if(err) // handle error
    const token = oauth2.accessToken.create(result) // 這裡就是得到的access_token
})

（3）重要的token得到之後，就預示著三方登入已經登入成功。接下來就是自己系統的處理了。

至此，三方登入已經成功登入。

寫的可能不盡如人意，我也是學習者，寫的目的也是為了讓自己對oAuth2登入加深印象，如果錯誤，歡迎指正，一起進步啊。

相關文章