vue前端第三方登录模块设置(微博+github+腾讯)

2020.02.14 14:02:16
50
阅读约 5 分钟
Scroll down

为了让自己在第三方登录模块少走点弯路,本文将记录一下自己第三方登录接口的设置流程,在此首先以微博登录举例,总体过程大概分为下面的三步骤。

  • 获取用户授权,取得code
  • 将code发送到授权服务器获取Access Token
  • 通过Access Token调取API接口获取用户信息

微博授权 #

在微博开发平台[1]申请应用,拿到应用的App Key
img
在高级设置这里,我们可以设置一个回调地址,也就是用户授权完成之后重定向的页面,这里我都设置成了开发环境的首页。
img

获取授权链接 #

接下来,我们可以在组件中获取到需要请求的地址,在组件中写一个方法:

 async getWeiboUrl() {
   const res = await this.$http.get('/auth/weibo')
    this.weiboUrl = res.data
  }

在后端我们处理这个请求,并将拼接好的链接返回

const weibo_app_key = '1817535842';
    const reponse_type = 'code';
    const redirect_uri = process.env.CALL_BACK_URL;
    const baseUrl = 'https://api.weibo.com/oauth2/authorize?';

    const weibo_url =
      baseUrl +
      `client_id=${weibo_app_key}&reponse_type=${reponse_type}&redirect_uri=${redirect_uri}`;
    const github_url =
      'https://github.com/login/oauth/authorize?client_id=8e6a860f7dc156db8516&scope=user:name';

    let url = {
      github_url,
      weibo_url,
    };
    return url;

地址格式

https://api.weibo.com/oauth2/authorize?client_id=你的ID&response_type=code&redirect_uri=你的回调链接

现在我们可以尝试直接访问这个地址
img
可以看到大概是这样的一个授权界面
授权成功后我们会跳转到首页,并得到一个code值

获取token #

https://api.weibo.com/oauth2/access_token?client_id=你的AppID&client_secret=密匙&grant_type=authorization_code&redirect_uri=重定向地址&code=前面返回的code
必选 类型及范围 说明
client_id true string 申请应用时分配的AppKey。
client_secret true string 申请应用时分配的AppSecret。
grant_type true string 请求的类型,填写authorization_code
code true string 调用authorize获得的code值。
rediect_url true string 回调地址,需需与注册应用里的回调地址一致。

拿到这个地址之后,我们在后端通过axios去请求他,这里我先把链接写死,之后可以动态的传入参数,

 async signWeiboToken() {
    const url = `https://api.weibo.com/oauth2/access_token?client_id=1817535842&client_secret=57fed87a682b2078e4143afbbf408aa8&grant_type=authorization_code&redirect_uri=http://127.0.0.1:3000&code=6c9d7bb2da6277a0a3eb1a209163d677`;

    axios
      .post(url)
      .then(res => {
        // 给微博链接赋值
        const user_token = res.data.access_token;
        const uid = res.data.uid;
      })
      .catch(error => {
        console.log(error);
      });
  }

img
可以看到成功拿到了我们的accesstoken,接下来我们只需要拿着token去请求用户的数据就搞定了。
用拼接好的链接再次请求拿到用户的个人信息

// 拼接一个链接用来请求用户信息

 const get_url = `https://api.weibo.com/2/users/show.json?access_token=${user_token}&uid=${uid}`
    console.log(get_url);
    axios
      .get(get_url)
      .then(res => {
        this.bindUser(res.data);
      })
      .catch(error => {
        console.log(error);
      });

请求后拿到的数据,接着依据这些数据,我们可以去创建一个新用户,并绑定到这个微博id上。下次再用微博登录的时候可以先去验证这个微博id是否已存在,存在的话就不用再次去创建新用户了。
img

Github授权 #

申请步骤

  1. 登录gitHub官网[2],注册或者登录账号。
  2. 打开 Setting > Developer setting > OAuth applications。
  3. 点击 Register a new application。
  4. 填入基本的app信息。

具体流程
转跳到 GitHub 用户授权页面, client_id 必须传 其他参数如果有需要就传,例如我这里需要获取用户的邮箱信息,就加了一个 scope=user:naem 最终拼成的请求code地址格式如下

https://github.com/login/oauth/authorize?client_id=8e6a860f7dc156db8516&scope=user:name

当用户同意授权后,链接地址就会转跳到 我们配置页面内的 Authorization callback URL 所填写的URL地址,并且会带上一个 code参数,这个参数在后面获取用户token是必须的一个参数。 获取到这个code参数后,我会将这个code传到服务器的后台,然后后台调用https://github.com/login/oauth/access_token 这个api,传入 client_id, client_secret, code 这三个参数,可以获取到一个access_token

请求token地址格式

https://github.com/login/oauth/access_token?client_id=8e6a860f7dc156db8516&client_secret=your_secret&code=之前获取的code

获取到 access_token 后, 再调用 https://api.github.com/user 这个API,就可以获取到基本的用户信息了。 根据第一步传入的不同的 scope,获取到的用户信息也是不同的。本博客后台使用 ID 字段作为用户的唯一标示,因为login(实则为用户名)有可能会更改。

请求用户信息格式:

 get_url = `https://api.github.com/user`;
 await axios
        .get(get_url, {
          headers: {
            Authorization: `token ${user_token}`,
          },
        })
        .then(res => {
          result = this.bindUser(res.data);
        })
        .catch(error => {
          throw error;
        });

  1. 微博开放地址:https://open.weibo.com ↩︎

  2. gihub开放地址:https://github.com/settings/applications ↩︎

阅读:50 . 字数:1136 发布于 8 个月前
Copyright 2018-2020 Siques