github授权登录具体流程
一、注册应用
github注册应用 github项目主页,点击头像——setting—— Developer settings——OAuth Apps——New OAuth App
——Register application
成功后会得到 Client ID和 Client secrets
二、前端
配置config
// react和vue在创建过程中,会将 process.env.NODE_ENV 初始为一个值, 我们也可以在后期进行配置的时候修改这个值
// 生产环境下
const config = {
oauth_url: "https://github/login/oauth/authorize",
redirect_url: "http://codeting.top/login",
client_id: "*****",
client_secret: "*******",
};
// 本地开发环境下
if (process.env.NODE_ENV === "development") {
config.redirect_url = "http://localhost:3001/#/";
config.client_id = "********";
config.client_secret = "*********";
}
export default config;
点击登录按钮
handleOAuth = () => {
setLocalStorage({
beforeUrl: window.location.href,
});
window.location.href = `${config.oauth_url}?client_id=${config.client_id}&redirect_url=${config.redirect_url}`;
};
跳转到授权页,授权页 授权登录后,跳转到回调地址页(github给我们的回调地址添加参数code了),在回调地址页加载时,进入 componentDidMount周期,我们在此周期获取code的值,如果有此值就(携带此值)向后端发起请求
componentDidMount() {
const code = getQueryStringByName("code");
if (code) {
this.setState(
{
code: code,
},
() => {
if (!this.state.code) {
return;
}
this.getUser(this.state.code);
}
);
}
}
//封装的请求方法
getUser(code) {
userGithubLogin({
code: code,
}).then((res) => {
console.log(res,'用户的信息就获取到了')
});
if(res.data.status===200){
window.location.href = getLocalStorage('beforeUrl').beforeUrl
}
}
三、后端
配置config
exports.GITHUB = {
username: "fujinting",
oauth_url: "https://github/login/oauth/authorize",
access_token_url: "https://github/login/oauth/access_token",
//获取 github 用户信息 url eg: https://api.github/user?access_token=****&scope=&token_type=beare,
user_url: "https://api.github/user",
// // 生产环境
// redirect_url: 'http://codeting.top/login',
// client_id: '*****',
// client_secret: '*****',
// 开发环境
redirect_url: "http://localhost:3001",
client_id: "*****",
client_secret: "*****",
};
后端过去code,如果有code,携带code,client_id,client_secret向github验证服务器(验证服务器地址github官方提供)发起请求,(验证)请求成功的话,返回access_token= 3u8dy8e3r8821eb3y2vbyurwid&scope=&token_type=bearer
,拿到access_token的值,我们要向github用户服务器(用户信息服务器地址github官方提供)获取用户的信息,我们要将access_token放在请求头内发起请求,请求成功后,用户信息就会返回
// github登录
async userGithubLogin(req, res) {
const code = req.body.code;
if(!code){
res.send({
message:'code缺失,请联系开发者',
status:411
})
return false;
}
//初始化一些值,准备向github服务器发起验证请求了
const verify_path = CONFIG.GITHUB.access_token_url;
const infor_path = CONFIG.GITHUB.user_url;
let access_token= '';
const body = {
client_id: CONFIG.GITHUB.client_id,
client_secret: CONFIG.GITHUB.client_secret,
code: code,
};
// fetch node端使用fetch, 和github验证服务器进行交互
await fetch(verify_path, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
})
.then(result => {
return result.text();
}).then(body => {
console.log("body:",body);
const args = body.split('&');
const arg = args[0].split('=');
access_token = arg[1];
})
// 初始化一些值
console.log(access_token,555555);
await fetch(infor_path,{
headers: { 'Authorization': 'token '+ access_token},
})
.then(result1 => {
console.log('res1:', result1);
return result1.json();
})
.then(response => {
console.log(response,'44444444444444');
res.send({
status:200,
response
})
})
}
response的值
{
login: 'fujinting',
id: ******,
node_id: '******',
avatar_url: 'https://avatars.githubusercontent/u/******?v=4',
gravatar_id: '',
url: 'https://api.github/***/fujinting',
html_url: 'https://github/**',
followers_url: 'https://api.github/users/******',
following_url: 'https://api.github/users/fujinting/following{/other_user}',
gists_url: 'https://api.github/users/fujinting/******',
starred_url: 'https://api.github/users/fujinting/*****',
subscriptions_url: 'https://api.github/users/fujinting/******',
organizations_url: 'https://api.github/users/fujinting/***',
repos_url: 'https://api.github/users/fujinting/*****',
events_url: 'https://api.github/users/fujinting/****',
received_events_url: 'https://api.github/users/fujinting/******',
type: 'User',
site_admin: false,
name: 'fujinting',
company: 'student',
blog: '',
location: null,
email: null,
hireable: null,
bio: '觉得项目不错就点个star吧',
twitter_username: null,
public_repos: 9,
public_gists: 0,
followers: 3,
following: 0,
created_at: '2020-02-05T09:16:29Z',
updated_at: '2021-03-21T07:29:26Z'
}
此时后端获取到,根据自己的需求,保存到自己数据库,也可以直接发送回前端…
QQ登录待更新
更多推荐
OAuth2.0—— 个人网站实现 github授权登录,QQ扫码登录
发布评论