OAuth2.0—— 个人网站实现 github授权登录，QQ扫码登录

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.com/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.com/login/oauth/authorize",
  access_token_url: "https://github.com/login/oauth/access_token",
  //获取 github 用户信息 url  eg: https://api.github.com/user?access_token=****&scope=&token_type=beare,
  user_url: "https://api.github.com/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.com/u/******?v=4',
  gravatar_id: '',
  url: 'https://api.github.com/***/fujinting',
  html_url: 'https://github.com/**',
  followers_url: 'https://api.github.com/users/******',
  following_url: 'https://api.github.com/users/fujinting/following{/other_user}',
  gists_url: 'https://api.github.com/users/fujinting/******',
  starred_url: 'https://api.github.com/users/fujinting/*****',
  subscriptions_url: 'https://api.github.com/users/fujinting/******',
  organizations_url: 'https://api.github.com/users/fujinting/***',
  repos_url: 'https://api.github.com/users/fujinting/*****',
  events_url: 'https://api.github.com/users/fujinting/****',
  received_events_url: 'https://api.github.com/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登录待更新