摘要：第三方登錄是現在常見的登錄方式，免注冊且安全方便快捷。大部分的第三方登錄都參考了的認證方法。這里我主要總結一下第三方登錄組件的設計流程。身份認證組件，需解耦，至少要喚起登錄和登出事件。認證成功喚起登錄事件并將用戶信息傳遞出去。

第三方登錄是現在常見的登錄方式，免注冊且安全方便快捷。

本篇文章將以Github為例，介紹如何在自己的站點添加第三方登錄模塊。

OAuth（開放授權）是一個開放標準，允許用戶讓第三方應用訪問該用戶在某一網站上存儲的私密的資源（如照片，視頻，聯系人列表），而無需將用戶名和密碼提供給第三方應用。

更多關于OAuth2.0的信息請訪問 OAuth 2.0 — OAuth

實際使用只需要知道：

提供方儲存了用戶的信息，ID，Name，Email等。

客戶端通過提供方指定的頁面發起請求，獲取token。

客戶端通過token獲得用戶信息。

詳細的認證過程請訪問官方文檔 Authorization options for OAuth Apps，這里我對一般的web app請求認證的過程做一下總結。

用戶點擊登錄按鈕跳轉至Github提供的授權界面，并提供參數：客戶端ID（稍后會介紹到），回調頁面等。

GET https://github.com/login/oauth/authorize

參數：

通過驗證后頁面跳轉至之前提供的回調頁面，url中包含相關參數：code和state。

客戶端以POST的方式訪問GIthub提供的地址，提供參數code等。

POST https://github.com/login/oauth/access_token

參數：

Github返回數據, 包含accesstoken。根據不同的Accept標頭返回不同格式，推薦json。

Accept: application/json
{"access_token":"e72e16c7e42f292c6912e7710c838347ae178b4a", "scope":"repo,gist", "token_type":"bearer"}

客戶端以GET的方式訪問Github提供的地址，在參數中加入或在head中加入accesstoken。

GET https://api.github.com/user?access_token=...

curl -H "Authorization: token OAUTH-TOKEN" https://api.github.com/user

Github返回用戶的json數據。

大部分的第三方登錄都參考了Github的認證方法。

不用多說，Vue.js。這里我主要總結一下第三方登錄組件的設計流程。

以博客系統為例，可分為三類：

主頁，所有組件的parent。

身份認證組件，需解耦，至少要喚起登錄和登出事件。

其他需要身份認證的組件。

組件的職能可概括為以下幾點：

未登陸狀態時顯示登陸按鈕，登陸狀態時顯示注銷按鈕。

點擊登錄按鈕時，頁面發生跳轉。

監視地址欄有無code和正確state出現。如果出現開始身份認證。

認證成功喚起登錄事件并將用戶信息傳遞出去。

用戶點擊登出喚起登出事件。

更全面的，出于方便考慮以及Auth2.0的特性，accesstoken可以存放至cookie以實現一定時間內免登陸且不用擔心密碼泄露。響應的在用戶認證成功和登出時需要對cookie進行設置和清除操作。

那么開始最主要組件auth的編寫

首先進行準備工作，訪問Github -> settings -> Developer settings 填寫相關信息創建 Oauth App。

注意： 此處設置的 Authorization callback URL 即為客戶端的回調頁面?？蛻舳松暾垟y帶的參數與這個地址不同會報相應的錯誤。

得到client信息后就可以在auth組件內設置字段了。

" @/components/GithubAuth.vue "
data () {
    return {
      client_id: "your client ID",
      client_secret: "your client secret",
      scope: "read:user", // Grants access to read a user"s profile data.
      state: "your state",
      getCodeURL: "https://github.com/login/oauth/authorize",
      getAccessTokenURL: "/github/login/oauth/access_token", 
      getUserURl: "https://api.github.com/user",
      redirectURL: null,
      code: null,
      accessToken: null,
      signState: false
    }
  }

模板中加入登錄按鈕, 保存之前的地址至cookie以便登錄后回調，跳轉至授權頁面。

登錄

saveURL: function () {
      if (Query.parse(location.search).state !== this.state) {
        this.$cookie.set("redirectURL", location.href, 1)
        location.href = this.getCodeURL
      }
    }

A Vue.js plugin for manipulating cookies.   ---vue-cookie 
Parse and stringify URL.   ---query strings

組件創建后，檢查地址欄是否存在有效code。如果存在則進行相應處理，獲取有效accesstoken存入cookie，頁面回調至登錄之前保存的地址。 如果不存在則檢查cookie內是否存在accesstoken 獲取用戶信息。

注意： 需要計算得到的屬性務必在computed下定義。

computed: {
    formatCodeURL: function () {
      return this.getCodeURL + ("?" + Query.stringify({
        client_id: this.client_id,
        scope: this.scope,
        state: this.state
      }))
    }
  }

 created: function () {
    this.getCode()
    // when code in url
    if (this.code) this.getAccessToken()
    else {
      // if no code in top, get accessToken from cookie
      this.accessToken = this.$cookie.get("accessToken")
      if (this.accessToken) this.getUser()
    }
  }

獲取地址欄攜帶的code參數的處理：getCode()

getCode: function () {
      this.getCodeURL += ("?" + Query.stringify({
        client_id: this.client_id,
        scope: this.scope,
        state: this.state
      }))
      let parse = Query.parse(location.search)
      if (parse.state === this.state) {
        this.code = parse.code
      }
    }

利用code獲取accesstoken的處理： getAccessToken()

getAccessToken: function () {
      this.axios.post(this.getAccessTokenURL, {
        client_id: this.client_id,
        client_secret: this.client_secret,
        code: this.code,
        state: this.state
      }).then((response) => {
        this.accessToken = response.data.access_token
        if (this.accessToken) {
          // save to cookie 30 days
          this.$cookie.set("accessToken", this.accessToken, 30)
          this.redirectURL = this.$cookie.get("redirectURL")
          if (this.redirectURL) {
            location.href = this.redirectURL
          }
        }
      })
    }

A small wrapper for integrating axios to Vuejs.    ---vue-axios

要說的是，因為axios是基于promise的異步操作，所以使用時應當特別注意。頁面跳轉放在回調函數里是為了防止promise還未返回時頁面就發生跳轉。

重要 ：包括ajax，fetch在內的向后臺提交資源的操作都存在跨域問題。瀏覽器同源政策及其規避方法(阮一峰)。 這里利用了代理的方法，使用vue-cli時可通過配置文件臨時設置代理規避跨域問題。在生產環境下需要配置服務器代理至其他域名。

" $/config/index.js "
proxyTable: {
      "/github": {
        target: "https://github.com",
        changeOrigin: true,
        pathRewrite: {
            "^/github": "/"
        }
    }

/github會在請求發起時被解析為target。設置完成后中斷熱重載重新編譯，重新編譯，重新編譯。

利用accesstoken獲取用戶信息的處理：getUser()

getUser: function () {
      this.axios.get(this.getUserURl + "?access_token=" + this.accessToken)
        .then((response) => {
          let data = response.data
          this.signState = true
          // call parent login event
          this.$emit("loginEvent", {
            login: data.login,
            avatar: data.avatar_url,
            name: data.name
          })
        })
        // invaild accessToken
        .catch((error) => {
          console.log(error)
          this.$cookie.delete("accessToken")
        })
    }

請求用戶信息成功后觸發了loginEvent事件，并以當前用戶信息作為參數傳遞出去。

用戶登出的處理： logout()

注銷

logout: function () {
      this.$cookie.delete("accessToken")
      this.signState = false
      this.$emit("logoutEvent")
    }

清理cookie，觸發用戶登出事件。

引入auth組件并注冊為子組件。

import GithubAuth from "@/components/GithubAuth"
Vue.component("auth", GithubAuth)

設置子組件觸發事件后的處理函數

methods: {
    login: function (user) {
      this.user = user
    },
    logout: function () {
      this.user = null
    }
  }

初始化一個空的user字段后等待auth喚起事件，改變user字段的值。

data () {
    return {
      user: null
    }
  }

因為Vue.js是響應式的，props中設置user字段，初始化時傳入即可。

props: ["user"]

以上僅是我個人總結出的一些方法，如有更好的解決方法或是錯誤的地方請指出，感激不盡！