OAuth 受權認證(第三方登陸)

時間 2019-11-15

標籤 oauth 受權認證第三方登陸简体版

原文原文鏈接

本章以第三方應用(GitHub)爲例，來模擬實現獲取第三方應用的權限用戶資料html

基本的認證流程：
vue

執行步驟從上到下node

首先咱們須要新建一個文件，並安裝依賴來寫咱們的代碼：
ios

接着咱們須要在index.html中生成一個模板，並引入須要使用到的script標籤：git

固然，若是在項目中的話，確定不這樣使用，在項目中都是先後端分離的，使用Vue模板進行書寫，這裏只是爲了書寫測試更加方便而已github

index.html代碼：npm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Index</title>
</head>

<body>
    <div id="app">
        <h1>使用github登陸</h1>
        <!-- 定義一個連接，當點擊的時候，能夠調用後臺的接口 -->
        <a href="/github/login">login with github</a>
    </div>
</body>
<script>
    new Vue({
        el: "#app"
    })
</script>

</html>
複製代碼

接着咱們須要在index.js文件中引入要使用到的依賴，並對index.html文件進行託管：axios

const koa = require('koa')
const router = require('koa-router')()
const static = require('koa-static')
const axios = require('axios')
const querystring = require('querystring')

const app = new koa()

// 用來託管靜態資源，此處託管的是 index.html
app.use(static(__dirname + '/'))

//配置路由
app.use(router.routes()); // 啓動路由
app.use(router.allowedMethods());

//監聽3000端口
app.listen(3000)
複製代碼

而後進入文件夾下，使用nodemon index.js把服務跑起來後端

測試：
api

而後咱們須要進入到網址：github.com/settings/ap… 來建立一個應用

以下：

而後會生成一個應用，並生成一個Client ID和Client Secret，這兩個東西很是重要，咱們要在咱們後端定義一個變量來把他們存放起來

index.js文件新增代碼：

const config = {
    client_id: '99425ffcd07341565215',
    client_secret: '4f4c405d2002f5ca33cf6980febb080de74ca0f8'
}
複製代碼

接着當咱們點擊網頁上面的超連接的時候，咱們須要跳轉到GitHub的認證頁面https://github.com/login/oauth/authorize而且須要帶上client_id

而後咱們須要認證，本身直接填入帳號密碼，而後會讓你填寫code，會把code發給你的郵箱（註冊github的郵箱），只需填上認證一下就OK了（這裏我已經認證過了）

接着當咱們認證成功的時候，就會返回到上面你填寫的那個頁面，我填的是（http://127.0.0.1:3000/github/callback）

接下來在index.js中寫代碼進行測試：

const koa = require('koa')
const router = require('koa-router')()
const static = require('koa-static')
const axios = require('axios')
const querystring = require('querystring')

const app = new koa()

// 用來託管靜態資源，此處託管的是 index.html
app.use(static(__dirname + '/'))

const config = {
    client_id: '99425ffcd07341565215',
    client_secret: '4f4c405d2002f5ca33cf6980febb080de74ca0f8'
}

router.get('/github/login', ctx => {
    //須要重定向到github的認證頁面,須要帶上client_id
    let path = 'https://github.com/login/oauth/authorize?client_id=' + config.client_id
    ctx.redirect(path)

})

router.get('/github/callback', (ctx) => {
    //打印一句話進行測試
    console.log('callback...');
})

app.use(router.routes()); // 啓動路由
app.use(router.allowedMethods());

app.listen(3000)
複製代碼

測試：

而後咱們須要在/github/callback接口中來得到code，用code申請令牌，而後解析令牌，用令牌獲取用戶信息

下面使用的網址都是固定的網址，只是每一個人所帶的參數不同

修改index.js代碼以下：

const koa = require('koa')
const router = require('koa-router')()
const static = require('koa-static')
const axios = require('axios')
const querystring = require('querystring')

const app = new koa()

// 用來託管靜態資源，此處託管的是 index.html
app.use(static(__dirname + '/'))

const config = {
    client_id: '99425ffcd07341565215',
    client_secret: '4f4c405d2002f5ca33cf6980febb080de74ca0f8'
}

router.get('/github/login', ctx => {
    //須要重定向到github的認證頁面,須要帶上client_id
    let path = 'https://github.com/login/oauth/authorize?client_id=' + config.client_id
    ctx.redirect(path)

})

//當咱們的github認證成功的時候，會調用這個接口
router.get('/github/callback', async (ctx) => {
    //打印一句話進行測試
    // console.log('callback...');

    // 在認證成功的時候，咱們會收到code
    const code = ctx.query.code
    // console.log(code);  //072a58edf792558ae6a9

    //接下來咱們須要申請令牌，須要使用到三個參數
    const params = {
        client_id: config.client_id,    //上面定義的config中的參數
        client_secret: config.client_secret,    //上面定義的config中的參數
        code: code  //認證成功時，返回的code
    }
    //獲取令牌
    let res = await axios.post("https://github.com/login/oauth/access_token", params)
    // console.log(res.data)

        
    //利用querystring把令牌進行解析，而後獲取access_token
    const access_token = querystring.parse(res.data).access_token;
    // console.log(access_token) 

    //有了access_token後，就能夠拿到用戶信息了，須要帶上access_token，固然在項目中，會在請求攔截那裏帶上這個token
    res = await axios.get("https://api.github.com/user?access_token=" + access_token)
    // console.log(res.data) // 獲得一堆的用戶信息

    //輸出用戶部分信息
    ctx.body = `
        <h1>hello ${res.data.login}</h1>
        <img src=${res.data.avatar_url} />
    `

})

app.use(router.routes()); // 啓動路由
app.use(router.allowedMethods());

app.listen(3000)
複製代碼

測試：

至此，就能夠獲取到用戶信息，而後就可使用用戶信息。

@_@

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。