使用 Vue 建立 MixinMessenger 的用户登录功能

最新推荐文章于 2024-05-28 09:49:50 发布

刘泽美

最新推荐文章于 2024-05-28 09:49:50 发布

阅读量680

点赞数

分类专栏： Mixin 区块链全栈

本文链接：https://blog.csdn.net/weixin_41884153/article/details/104749122

版权

全栈同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

区块链

13 篇文章 1 订阅

订阅专栏

Mixin

3 篇文章 1 订阅

订阅专栏

项目中不涉及后端代码，仅供学习参考使用。关于API的使用，详情请参见文档：Mixin API，或者部分中文文档

读完此篇文章，您将获得

Mixin Messenger的登录功能，可以获取用户的基本信息，手机号等信息。
掌握 Mixin Messenger Auth 的调用流程

技术栈

Vue.js
Vue-Router
Axios

这里直接使用的 Vue-cli3 创建工程

Demo 参见

http://mixin-auth-demo.liuzemei.com/

以下进入正文

1. 基本概念解读

第三方登录

相信大家对 QQ、微信登录并不陌生，在第一个第三方的平台上，使用 QQ 登录，或者微信扫码登录，然后平台就可以获取到你在 QQ 或者微信上的头像、昵称，甚至可以授权手机号查看，这样第三方平台就可以获取到你在 QQ或者微信上保留的手机号信息了。

Mixin 登录道理也是一样的。我们即将要开发的机器人，就是一个第三方平台，而 Mixin Messenger 就相当于上述的 QQ 或者微信。

我们的目的很简单，就是让用户省去填写各种繁琐注册信息的麻烦，而直接用 Mixin Messenger 扫码就可以完成注册、登录，并体验您应用的核心功能。

2. 认证思路解读

1. 认证过程

用户打开您的网站
您的网站发现没有登录(出现登录框或者)，直接自动跳转 Mixin 的认证页面
用户点击确认授权
网站自动跳转到相应的页面
完成认证(注册、登录)

下载 Mixin Messenger 移动端后，用上述 Demo 扫码即可登录。

3. 从零开始实现

1. 注册一个 Mixin Application

详情参见

2. 详细代码

https://github.com/liuzemei/vue-mixin-demo

3. 运行 demo

拉下代码

git clone https://github.com/liuzemei/vue-mixin-demo

修改机器人信息
更换 keystore.json 的 client_id 和 client_secret

这里的 client_id 和 client_secret 的获取，请看 3.1 注册一个 Mixin Application

更改 Mixin开发者后台

打开 https://developers.mixin.one/dashboard
找到上述对映 client_id 的机器人。
首页网址改成： http://localhost:8080
验证网址改成： http://localhost:8080/auth
点击保存。

Mixin开发者后台

回到项目运行

npm install
npm run dev

这里默认你的 8080 端口没有占用，如果占用的话，按照终端里显示的端口再配置一下开发者后台的端口。

项目演示
浏览器打开 http://localhost:8080
会自动跳转 Mixin 授权页，然后授权成功后，会显示用户的基本信息。

如果是在 MixinMessenger 客户端内打开的话，会直接弹出授权提示。

4. 核心代码片段解析

4.1. `src/App.vue`

import { client_id } from "../keystore.json";
export default {
  methods: {
    to_auth(url) {
      window.localStorage.clear();
      url = url || "/";
      window.location.href = `https://mixin.one/oauth/authorize?client_id=${client_id}&scope=SNAPSHOTS:READ+PROFILE:READ+PHONE:READ+ASSETS:READ+CONTACTS:READ&response_type=code&return_to=${url}`;
    }
  },
  mounted() {
    window._vm = this;
    if (window.location.pathname === "/auth") return;
    if (!window.localStorage.getItem("token")) this.to_auth(url);
  }
};

_vm：初始化的时候，将根实例挂在到window对象上，方便全局访问。
实际项目中可以用 eventBus 其他方案来取代。
token：这里很关键的一步，就是在初始化的时候，判断一下 localStorage 中是否有 token ，没有 token 的话就要跳转到登录页去获取 token。
to_auth：
参数：url 表示通过授权之后返回的 pathname 。
功能：去到授权页面，并指定授权之后返回的 url。
例1：本例中并没有使用参数 url ，所以默认授权成功后，会跳转 https://developers.mixin.one/dashboard 中配置的 验证网址，并携带这里传入的 url 和 code，也就是形如
http://192.168.0.106:8080/auth?code=xxxxxxxxxxxx&return_to=/
例2：假如传入 url=’/about’，授权成功之后，就会跳转
http://192.168.0.106:8080/auth?code=xxxxxxxxxxxx&return_to=/abount

4.2. `src/components/Auth.vue`

import { authenticate } from "../api";

export default {
  async mounted() {
    let { _vm } = window;
    let error = getUrlParameter("error");
    let authorizationCode = getUrlParameter("code");
    let returnTo = getUrlParameter("return_to");
    if (!authorizationCode || error === "access_denied") return _vm.to_auth();
    returnTo = !returnTo ? "/" : returnTo;
    let { data } = await authenticate(authorizationCode);
    window.localStorage.setItem("token", data.access_token);
    window.localStorage.setItem("scope", data.scope);
    this.$router.push(returnTo);
  }
};

function getUrlParameter(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
  var results = regex.exec(window.location.search);
  return results === null
    ? ""
    : decodeURIComponent(results[1].replace(/\+/g, " "));
}

getUrlParameter: 获取 url 的参数。
核心是获取到 code
根据 code 然后再通过调用 authenticate
(实际上就是请求 POST https://api.mixin.one/oauth/token)
_vm：其实就是在 App.vue 的实例。
access_token：这一步比较重要，就是要留住 access_token。以后所有需要请求api.mixin.one的操作，都需要这个 access_token，可以直接理解为身份凭证。
Demo中的代码比较简单，正常项目中，肯定是要把POST https://api.mixin.one/oauth/token这一步放到后端的，避免 client_secret 暴露了。
return_to ：在这里就可以拿到 4.1 所述的 url 并进行一些操作了。

4.3 `src/api.js`

ajax.interceptors.request.use(config => {
  let { _vm } = window
  let token = window.localStorage.getItem("token")
  if (!token) {
    setTimeout(() => {
      _vm.to_auth();
    }, 100)
  }
  config.headers.Authorization = "Bearer " + token
  return config
})

interceptors：这个请求拦截器主要是为了判断是否有 token，并把 token 包装在 headers {Authorization: "Bearer " + token}，然后再发起请求。
实际情况下，这里的 token 一般使用后端生成后的 token，而实际的 access_token 保存在后端，方便请求。

4.3 `src/components/Home.vue`

<template>
  <div>
    <div class="uinfo">
      个人信息
      <ul>
        <img :src="uinfo.avatar_url" />
        <li>User ID：<br />{{uinfo.user_id}}</li>
        <li>昵称：{{uinfo.full_name}}</li>
        <li>Identity Number：{{uinfo.identity_number}}</li>
        <li>Phone：{{uinfo.phone}}</li>
        <li>个人签名：{{uinfo.biography}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      uinfo: {}
    };
  },
  async mounted() {
    this.uinfo = await this.APIS.get("/me");
  }
};
</script>