OAuth2第三方登陸實踐

OAuth2 是一個開放受權標準，旨在讓用戶容許第三方應用去訪問該用戶在某服務器中的特定私有資源，而能夠不提供其在某服務器的帳號密碼給到第三方應用。

一、受權流程

• 四大角色

Resource Owner：資源全部者
Resource Server：資源服務器
Client：第三方應用客戶端
Authorication Server：受權服務器

• 流程

一、第三方應用發起Authorization Request，通常須要提供如下參數（受權許可類型爲受權碼Authorization Code時）：
a) response_type：必選。值固定爲code。
b) client_id：必選。第三方應用的標識ID。
c) state：推薦。Client提供的一個字符串，服務器會原樣返回給Client。
d) redirect_uri：必選。受權成功後的重定向地址。
e) scope：可選。表示受權範圍

二、用戶受權登陸後，第三方應用會獲取到一個Authorization Grant（受權許可），受權許但是一個表明資源全部者受權（訪問受保護資源）的憑據，客戶端用它來獲取訪問令牌。

三、第三方擁有受權許可後，提供如下參數請求Authorization Server（受權許可類型爲Authorization Code時）:
a) grant_type：必選。固定值authorization_code。
b) code: 必選。Authorization Response 中響應的code。
c) redirect_uri：必選。必須和Authorization Request中提供的redirect_uri相同。
d) client_id：必選。必須和Authorization Request中提供的client_id相同。

四、Authorization Server會返回以下典型的信息：
a) access_token：訪問令牌。
b) refresh_token：刷新令牌。
c) expires_in：過時時間。

具體可參考[認證 & 受權] 1. OAuth2受權

二、微信第三方登陸

• 前置準備

在微信開放平臺註冊開發者帳號，並擁有一個已審覈經過的網站應用，並得到相應的AppID和AppSecret，申請微信登陸且經過審覈後，而且設置好回調域名（不帶協議），可開始接入流程。

• 受權流程

一、第三方發起微信受權登陸請求，微信用戶容許受權第三方應用後，微信會拉起應用或重定向到第三方網站，而且帶上受權臨時票據 code參數。
ps： code是第三方用來獲取 access_token的， code的超時時間爲10分鐘，一個 code只能成功換取一次 access_token即失效。 code的臨時性和一次性保障了微信受權登陸的安全性。

二、經過code參數加上AppID和AppSecret等，經過API換取access_token（接口調用憑證）。

三、經過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操做。

• 代碼實現

export function oauthRedirect(scope = 'snsapi_userinfo', state = 'wechat') {
    //  已經受權過的能夠不用受權了 過時code 須要清空
    if (code) {
       return
    }
    let callbackUrl = encodeURIComponent(window.location.href)
    const host = `https://open.weixin.qq.com/connect/oauth2/authorize`
    let url = `${host}?appid=${APPID}&redirect_uri=${callbackUrl}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
    window.location.href = url
}
複製代碼

其中redirect_uri爲登陸以後的回調地址，要與在網站應用裏設置的回調域名一致，不然會報錯；scope爲受權做用域，表明用戶受權給第三方的接口權限（選擇的是snsapi_userinfo，獲取用戶我的信息）；state用於保持請求和回調的狀態，受權請求後原樣帶回給第三方。

用戶容許受權後，將會重定向到redirect_uri的網址上，而且帶上code和state參數，若用戶禁止受權，則重定向後不會帶上code參數，僅會帶上state參數。
具體信息可見微信官方文檔。

三、微博第三方登陸

• 前置準備

經過新浪微博開放平臺去註冊一個應用，拿到App Key，同時設置好受權回調地址。

• 受權流程

一、第三方發起微博受權登陸請求，微博用戶容許受權第三方應用後，微博會拉起應用或重定向到第三方網站，而且帶上受權臨時票據code參數。

二、經過code參數加上client_id和client_secret等，經過API換取access_token（接口調用憑證）。

三、經過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操做。

• 代碼實現

export function weiboOauthRedirect() {
    if (code) {
        return
    }
    let callbackUrl = encodeURIComponent(window.location.href)
    const host = `https://api.weibo.com/oauth2/authorize`
    let url = `${host}?state=wb&client_id=${APPID}&response_type=code&redirect_uri=${callbackUrl}?`
    window.location.href = url
}
複製代碼

具體參數信息可見微博官方文檔

三、google第三方登陸

• 前置準備

經過Google APIs控制檯去建立一個項目，選擇建立憑據 -> OAuth 客戶端 ID -> 網頁應用，以後輸入 JavaScript 來源、重定向 URI，拿到的客戶端ID用於後續操做。

• 受權流程

一、第三方發起google受權登陸請求，google用戶容許受權第三方應用後，google會拉起應用或重定向到第三方網站，回調函數中傳回code參數。

二、經過code參數加上client_id和client_secret等，經過API換取access_token（接口調用憑證）。

三、經過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操做。

具體信息可見google官方文檔。

• 代碼實現

// 首先須要先進行初始化
start() {
    $scriptjs(['https://apis.google.com/js/api:client.js'], () => {
        let gapi = window.gapi
        gapi &&
            gapi.load('auth2', () => {
                this.auth2 = gapi.auth2.init({
                    client_id: client_id,
                    cookiepolicy: 'single_host_origin',
                    scope: 'profile'
                })
            })
    })
}
// 獲取google受權並進行登陸
jumpGoogle() {
    if (this.auth2) {
        this.auth2
            .grantOfflineAccess()
            .then(async authCode => {
                let res = await googleLogin(authCode.code)
                res && this.handleRegister(res)
            })
            .catch(e => {
                e.msg && this.$toast(e.msg)
            })
    } else {
        this.$toast('您的裝置暫不支持Google Play服務')
    }
},
複製代碼

具體信息可見google官方文檔

四、Facebook 第三方登陸

• 前置準備

經過facebook開發者平臺去註冊一個應用，拿到App Key，同時設置好受權回調地址（僅支持https）。

• 受權流程

一、第三方發起facebook受權登陸請求，facebook用戶容許受權第三方應用後，facebook會拉起應用或重定向到第三方網站，而且帶上受權臨時票據code參數。

二、經過code參數加上client_id和client_secret等，經過API換取access_token（接口調用憑證）。

三、經過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操做。

• 代碼實現

export function facebookOauthRedirect(cb) {
    if (code) {
        return
    }
    // 先要判斷是是否能訪問外網
    let callbackUrl = encodeURIComponent(window.location.href)
    const host = `https://www.facebook.com/dialog/oauth`
    let url = `${host}?client_id=${clientId}&redirect_uri=${callbackUrl}&code=acgon&state=fb`
    $scriptjs(['https://code.jquery.com/jquery-3.1.1.min.js'], () => {
        window.jQuery.ajax({
            type: 'GET',
            dataType: 'jsonp',
            url: 'https://m.facebook.com/dialog/oauth',
            timeout: 2000,
            complete: function(XMLHttpRequest) {
                if (XMLHttpRequest.status === 200) {
                    window.location.href = url
                } else {
                    cb()
                }
            }
        })
    })
}
複製代碼

具體信息可見facebook官方文檔