使用github账户进行第三方登录授权
前端vue，后端node+express+mysql，使用什么框架技术不重要，大体的授权逻辑是一样的
项目源码
效果预览
github授权登录
1.项目创建准备（前端+后端+数据库）
前端
前端使用vue-cli3创建项目，可以参考这篇文章 vue-cli3项目
vue create web
后端
使用node+express创建项目，可以参考这篇文章 node+express项目
// 安装express及构造器
npm install express -g
npm install express-generator -g
// 初始化express项目
express server
数据库
新建一个数据库：test，
新建数据表：user_info，
添加username，password，portrait，login_time，shss_token字段
数据库test
2.再github上配置授权登陆信息
注册或登录github，一次选择Settings => Developer settings => New OAuth App
如果有域名的直接添加域名，如果像我这样开发测试的，指定为本地前端项目运行地址就行
guthub授权信息
保存id和secret
登记成功后会显示应用的id和secret，后面会用到。
id和secret
3.前端获取github提供的code并传给服务端
3.1 安装引入axios
为了方便开发，未作封装，只是简单的全局引入axios axios封装
npm install axios --save
3.2 全局引入 web/src/main.js
import axios from 'axios'
axios.defaults.baseURL='http://localhost:3000';
global.axios=axios;
3.3 跳转github登录授权页面 web/src/views/Home.vue
<template>
<div>
<button @click="toGithub">github登录</button>
</div>
</template>
<script>
//github登录授权页面
let oauth_uri='https://github.com/login/oauth/authorize'
//github中获取
let client_id = 'c26a2c36287f5662ed62'
//授权回调地址
let redirect_uri = 'http://192.168.1.177:8081'
export default {
methods: {
toGithub() {
window.location.href = `${oauth_uri}?client_id=${client_id}&redirect_url=${redirect_uri}`
}
}
};
</script>
3.4 新建授权回调页面及路由
根据在github上面配置的Authorization callback URL配置前端路由及页面
Authorization callback URL
创建对应路由 web/src/router.js
{
path: "/github/auth",
name: "github",
component: () =>
import(/* webpackChunkName: "about" */ "./views/Github.vue")
}
创建对应页面 web/src/views/Github.vue
<template>
<div>
<div>{{githubUser}}</div>
</div>
</template>
<script>
export default {
data() {
return {
githubUser: "github登陆中..."
};
},
mounted() {
let code = this.$route.query.code;
console.log(code)
}
};
</script>
<style lang="scss" scoped>
</style>
3.5 axios发送code至服务端
mounted() {
let code = this.$route.query.code;
axios
.get(`/users/github_auth?code=${code}`)
.then(res => {
if (res.data.data.username) {
this.githubUser = res.data.data.username;
}
})
.catch(function(err) {
console.log(err);
});
}
4.服务端接收code，获取用户信息，并插入数据库返回给前端
如果是自己在本地搭的node后台，因端口不一样，前台请求会有跨域问题，可以通过CORS解决，相关文章：CORS解决跨域问题
node代码直接写在一个接口中处理，每一步都写了清晰的注释
server/routes/users.js
var express = require("express");
var router = express.Router();
const fetch = require("node-fetch");
var mysql = require("mysql"); //引入mysql
//数据库配置
var db = {
mysql: {
host: "localhost",
user: "root", //数据库用户名
password: "root", //数据库密码
database: "test", //要链接的数据库
port: 3306 //默认端口
}
};
var selAll = "select * from user_info";
var pool = mysql.createPool(db.mysql);
router.get("/github_auth", async (req, res, next) => {
let code = req.query.code;
//获取github的access_token请求地址
let path = "https://github.com/login/oauth/access_token";
const params = {
//id和secret
client_id: "c26a2c36287f5662ed62",
client_secret: "f88afd71471725488ed301697f634c7d85d5524c",
//前端发送的code
code: code
};
await fetch(path, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(params)
})
.then(res => {
return res.text();
})
.then(body => {
//解析并返回access_token
let args = body.split("&");
let arg = args[0].split("=");
let access_token = arg[1];
return access_token;
})
.then(async token => {
//通过token获取用户信息
let url = "https://api.github.com/user?access_token=" + token;
await fetch(url)
.then(res2 => {
return res2.json();
})
.then(response => {
//拿到github用户信息
//写入数据库
let insertUser =
"INSERT INTO user_info (id,username,portrait) VALUES (?,?,?)";
let data = [response.id, response.login, response.avatar_url];
pool.getConnection(function(err, suc) {
//测试demo并未做用户筛选等处理
//可以在此处验证用户是否已授权，或已存在于数据库中
suc.query(insertUser, data, function(err, result) {
if (result) {
//插入新用户成功之后再把用户信息返回给前端
var getUser = "select * from user_info where id=?";
suc.query(getUser, [result.insertId], function(err, userRes) {
sendRes = {
//返回数据与格式
code: 200,
msg: "三方登录成功",
data: userRes[0]
};
res.json(sendRes); //响应返回json数据
suc.release();
});
}
});
});
});
})
.catch(e => {
console.log(e);
});
});
module.exports = router;
最后
关于第三方授权登录，个人认为既然用户选择了第三方授权登录，就不要在用户同意授权之后再返回网站选择注册账号，与网站账号是否绑定应该取决于用户自己，否则授权之后再注册，这跟耍流氓没啥区别。
还有第三方授权登录的用户表和直接网站注册的用户表，我认为可以放在一个表中，也可以分开放，如果放在一个表里面，就在用户授权之后信息保存数据库，用户只能通过授权才能登录，除非用户选择绑定网页账户。分开放的话应该更清晰一些，不过我本人对数据库方面了解也不多。。怎么存还是看各自网站的需求了
