給你的網站添加第三方登陸以及短信驗證功能

OAuth 2.0 是目前最流行的受權機制，用來受權第三方應用，獲取用戶數據。好比掘金這種第三方帳號 微信、微博、github 登陸方式同樣。思考一下這種登陸方式是如何設計和實現的呢？平常生活中不少APP或者網站在用戶輸入完手機號以後都須要發送驗證碼校驗，那麼這整套流程又是如何實現的呢？

1、OAuth的思路

OAuth在「客戶端」和「服務供應商」之間，設置了一個受權層。「客戶端」不能直接登陸「服務供應商」，只能登陸受權，以此將用戶與客戶端區分開來。「客戶端」登陸受權以後，「服務提供商」根據令牌的權限範圍和有效期，向"客戶端"開放用戶儲存的資料。

簡單說，OAuth 就是一種受權機制。數據的全部者告訴系統，贊成受權第三方應用進入系統，獲取這些數據。系統從而產生一個短時間的進入令牌（token），用來代替密碼，供第三方應用使用。

2、OAuth的登陸實踐

以GitHub爲例子，實現OAuth的受權登陸。接下來我會一步步實踐如何在你的網站中接入github受權登陸

一、GitHub 應用登記

點擊按鈕去github主頁新建一個OAuth App，點擊建立 按以下提示填寫信息

建立完以後記住頁面上方的 Client ID 和 Client Secret，後面開發時須要用到這兩個參數。

二、代碼實現

2.1 前端實現

前端採用了掘金的受權登陸方式，當用戶點擊第三方GitHub登陸，彈出一個新窗口

window.open("/oauth", "", "height=600, width=700")

在這個新窗口裏只須要跳轉連接，client_id，redirect_uri 就是以前建立的參數配置本身的就行。

window.location.href = 'github.com/login/oauth…' 用戶受權登陸以後會跳到redirect頁面，在redirect請求後端帶上剛產生的code，後端拿到code請求github獲得的用戶信息資料，最後關閉彈窗。

2.2 後端實現

後端做者採用的是Koa2,代碼以下

router.get('/oauth', async function(ctx, next) {
  const requestToken = ctx.request.query.code
  const tokenResponse = await axios({
    method: 'post',
    url: 'https://github.com/login/oauth/access_token?' +
      `client_id=${OAUTH_GITHUB.clientID}&` +
      `client_secret=${OAUTH_GITHUB.clientSecret}&` +
      `code=${requestToken}`,
    headers: {
      accept: 'application/json'
    }
  })
  const accessToken = tokenResponse.data.access_token
  const result = await axios({
    method: 'get',
    url: `https://api.github.com/user`,
    headers: {
      accept: 'application/json',
      Authorization: `token ${accessToken}`
    }
  })
複製代碼

後面根據本身的業務需求，將獲取到的信息存入到用戶表中。這裏的方式不少，我是直接將github受權登陸的信息插入到個人用戶表裏，或者你新建一個第三方oauth表去存放也是能夠的。

const oauthLogin = async (userData = {}) => {
  const username = userData.username
  const nickname = userData.username
  const avatar = userData.avatar
  const date = Date.now()
  const userSql = `select * from users where username = '${username}' `
  const rows = await exec(userSql)
  if (rows.length > 0) {
    return rows[0] || {}
  } else {
    const sql = `insert into users (username,password, nickname, avatar, date) values ('${username}', '${password}', '${nickname}', '${avatar}', '${date}');`
    const insertData = await exec(sql)
  }
}
複製代碼

最後的效果

3、短信驗證登陸

3.1 開通短信服務

短信驗證天然須要用到服務商，阿里雲有免費短信開通功能，免費開通短信服務，開通以後按每條0.04元計算。爲了練習充了一元測試短信驗證功能，免費開通這個仍是很是的好的，不用發不少錢就能夠上手測試

3.2 前端實現

仍是拿掘金的案例來說，用戶點擊註冊輸入手機號以後，點擊獲取驗證碼。

3.3後端實現

router.post('/sendSmsCodeToUser', async function (ctx, next) {
  const { username } = ctx.request.body
  CODE = Math.random().toString().slice(-6)
  var client = new RPCClient({
    accessKeyId: 'LTAI4FcGip5kqy1', // 本身申請短信的
    accessKeySecret: 'BvmhpNobez41as1vA5z1QSbhTGIm', 
    endpoint: 'https://dysmsapi.aliyuncs.com',
    apiVersion: '2019-12-14'
  })
  var params = {
    "RegionId": "cn-hangzhou",
    "PhoneNumbers": `${username}`,
    "SignName": "起航網",
    "TemplateCode": "SMS_180059442",
    "TemplateParam": `{code: ${CODE}}`
  }
  var requestOption = {
    method: 'POST'
  }
  var result = await client.request('SendSms', params, requestOption).then((res) => {
      return res
    }, (ex) => {
      return ex
    })
  if ('Code' in result) {
    ctx.body = new SuccessModel({message: '驗證碼發送成功'})
  } else {
    const limit = result.data.Message.split(':')[1]
    ctx.body = limit >= 10 ? new ErrorModel({message: '同一手機號天天只能發送 10 條驗證碼'}) : new ErrorModel({message: '同一手機號每小時只能發送 5 條驗證碼'})
  }
})
複製代碼

先後端請求對比CODE，實現短信驗證登陸功能