如何第三方授權登錄

前言

目前很多網站都有注冊登錄的方式,同時他們也都有第三方授權登錄,那么為什么第三方授權會有呢?

如果一個網站必須要注冊登錄才能訪問的話,那么他的訪問量會大量下降,如果不需要注冊,例如使用微信和QQ去登錄這個網站,是絕大多數的人的選擇

原理步驟

1. 一般第三方軟件會有一個授權步驟

2. 第三方授權的圖標是一個鏈接,鏈接到授權網站,獲取到token
   一般會攜帶一個 client_id
   還有一個回調地址 redirect_uri

3. 回調到后台地址,根據token,就可以調用第三方授權的api接口來獲取信息

const result = await axios({
    method: "get",
    url: `https://api.github.com/user`,
    headers: {
      accept: "application/json",
      Authorization: `token ${accessToken}`
    }
});

4. 根據result獲取到信息之后,然后重定向到前端,並且攜帶token

github實例

主要是github不需要審核等麻煩的步驟,直接就可以用,很方便

前端

<a href="https://github.com/login/oauth/authorize?client_id=更改為上面的Client ID&redirect_uri=更改為上面的回調地址">
   <img src="https://static.iiter.cn/github.ico" />
</a>

后端

index.js

const Koa = require("koa");
const router = require("koa-router")();
const app = new Koa();

router.use("/server/oauth", require("./oauth.js"));

// 加載所有路由
app.use(router.routes()); /*啟動路由*/
app.use(router.allowedMethods());

app.listen(10010, () => {
  console.log(`服務器運行在10010端口上`);
});

oauth.js

const code = require("koa-router")();
const axios = require("axios");
const clientID = "f4f827cfbebe51a858b8";    //更改為自己的ID
const clientSecret = "886840688d944d5afd0da2e7be5b5f1d0758b1b2";   //更改為自己的秘鑰

code.get("/github", async ctx => {
  const requestToken = ctx.request.query.code;
  const tokenResponse = await axios({
    method: "post",
    url:
      "https://github.com/login/oauth/access_token?" +
      `client_id=${clientID}&` +
      `client_secret=${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}`
    }
  });
  console.log(result.data)  // 這個就是獲取到的數據
  ctx.response.redirect(   
    // 這里重定向到自己的前端服務器  
    `http://taro.shtodream.cn/pages/my/index?name=${result.data.name}&avatar=${result.data.avatar_url}&token=${accessToken}`
  );
});

module.exports = code.routes();

我的實例網站

完整代碼