使用Taro实现微信小程序登录流程

Taro
Taro
发布日期:   2019-11-13
更新日期:   2026-09-08
文章字数:   422
阅读时长:   1 分
阅读次数:  

流程

![小程序登录流程](https://raw.githubusercontent.com/Damao2250/FileTransfer/master/Taro%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%99%BB%E5%BD%95%E6%B5%81%E7%A8%8B.png)

实现

1. 调用Taro.login()获取登录凭证code；
2. 调用Taro.request()将code传到服务器；
3. 服务器端调用微信登录校验接口（appid+appsecret+code），获得session_key+openid；
4. 服务器端生成AUTH_TICKET（相当于userId），使用AUTH_TICKET为key，session_key+openid为value的形式存在服 务器，并将AUTH_TICKET传送给客户端；
5. 客户端本地存储AUTH_TICKET，登录成功！
6. 下次登录时可以用AUTH_TICKET传输到服务器端验证登录态是否过期，未过期则登录成功。

获取用户信息

  • 获取用户信息一定要用户主动点击按钮授权
<Button openType="getUserInfo" onGetUserInfo={this.onGetUserInfo} type="primary">微信授权登录，获取用户信息</Button>

onGetUserInfo(info) {
    console.log(info.detail);
    if (info.detail.errMsg === “getUserInfo:ok”) {
    Taro.showToast({
        title: ‘授权成功，正在登录…’,
        icon: ‘none’,
        mask: true
    })
    } else {
        Taro.showToast({
            title: ‘未授权,请授权登录！’,
            icon: ‘none’,
            mask: true
        })
    }
}

注意

  • Taro 支持使用 async functions 来让开发者获得不错的异步编程体验，开启 async functions 支持需要安装包 @tarojs/async-await
$ yarn add @tarojs/async-await
# 或者使用 npm
$ npm install –save @tarojs/async-await
  • 随后在项目入口文件 app.js 中直接 import ，就可以开始使用 async functions 功能了
// src/app.js
import ‘@tarojs/async-await’
Taro
  目录