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

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

读完此篇文章，您将获得

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

技术栈

Vue.js
Vue-Router
Axios

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

相关代码参见

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

Demo 参见

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

以下进入正文

1. 基本概念解读

第三方登录

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

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

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

2. 认证思路解读

1. 认证过程

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

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

3. 从零开始实现

1. 注册一个 Mixin Application

详情参见

2. 详细代码

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

3. 运行 demo

1. 拉下代码

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

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

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

3. 更改 Mixin开发者后台

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

4. 回到项目运行

npm install
npm run dev

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

5. 项目演示
   浏览器打开 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);
  }
};

1. _vm：初始化的时候，将根实例挂在到window对象上，方便全局访问。
   实际项目中可以用 eventBus 其他方案来取代。
2. token：这里很关键的一步，就是在初始化的时候，判断一下 localStorage 中是否有 token ，没有 token 的话就要跳转到登录页去获取 token。
3. 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, " "));
}

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

1. 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>

好了，终于进入到业务的页面了。如果这个页面能够加载成功，那么就可以恭喜你登录成功了。
这个时候，页面上应该已经显示了你的基本信息了。

最后：再把git地址列出来。详细代码参见：
https://github.com/liuzemei/vue-mixin-demo

如有问题，也欢迎在Mixin Messenger上直接联系我。