小程序oauth2.0登录

我们使用flask来进行进行后台的

小程序

taro的oauth工具类

因为taro没有相应的oauth库，所以我单独写了一个基于taro的oauth工具类。

import querystring from 'querystring'
import base64 from 'base64-utf8'
import Taro from '@tarojs/taro'
import {remoteUrl} from "./request";
import config from "../config";


export default class OAuth2 {
  constructor({clientId, clientSecret, baseSite, authorizePath, accessTokenPath, callbackURL, customHeaders}) {
    this._clientId = clientId;
    this._clientSecret = clientSecret;
    this._baseSite = baseSite;
    this._authorizeUrl = authorizePath || "/oauth/authorize";
    this._accessTokenUrl = accessTokenPath || "/oauth/access_token";
    this._callbackURL = callbackURL;
    this._accessTokenName = "access_token";
    this._authMethod = "Basic";
    this._customHeaders = customHeaders || {};
  }

  /**
   * 创建报头
   * @returns {string}
   */
  buildAuthHeader() {
    const key = this._clientId + ':' + this._clientSecret;
    const str = base64.encode(key);
    return this._authMethod + ' ' + str;
  };

  _getAccessTokenUrl = function () {
    return this._baseSite + this._accessTokenUrl;
  }

  /**
   * 获取oath 的密码登录模式
   * @param clientId
   * @param clientSerect
   * @param username
   * @param password
   * @returns {Promise<any>}
   */
  getOAuthPasswordCredentials(username, password, user) {
    return new Promise((resolve, reject) => {
      const postData = 'grant_type=password&username=' + username + '&password=' + password + "&user=" + user;
      const postHeaders = {
        'Authorization': this.buildAuthHeader(),
        'Content-Type': 'application/x-www-form-urlencoded'
      };

      const url = this._getAccessTokenUrl()
      Taro.request({
        method: "POST", url, header: postHeaders, data: postData, dataType: 'form', success: (res) => {
          resolve(this.getResults(res.data))
        }, fail: (error) => {
          reject(error)
        }
      });
    });
  }

  /**
   * 解析结果
   * @param data
   * @returns {*}
   */
  getResults(data) {
    let results;
    try {
      results = JSON.parse(data);
    } catch (e) {
      results = querystring.parse(data);
    }
    return results;
  }
}

小程序请求

在小程序的请求调用中，基本跟oauth2.0的操作差不多。

// todo init access_token
const oauthClient = new OAuth2({
  clientId: 'wx_small',
  baseSite: config.remoteUrl,
  accessTokenPath: "/auth/oauth2/token"
});


/**
 * 更新tokengetUserInfo
 * @returns {Promise<void>}
 */
export async function refreshToken() {
  // get the code
  while (refreshing) {
    await waitInternal(1000);
  }

  let token = Taro.getStorageSync("token");
  if (token) {
    return JSON.parse(token);
  }

  refreshing = true;
  try {
    // 获取小程序使用 code
    const code = await wxLogin();
    if (!code) {
      return null;
    }

    // 获取用户
    const wxUser = await wxGetUserInfo();

    // shuang xin
    token = await oauthClient.getOAuthPasswordCredentials(
      "wx_small",
      code,
      wxUser.rawData 
    );

    token.expires = Date.now() + token.expires_in * 1000;
    Taro.setStorageSync("token", JSON.stringify(token));
    return token;
  } finally {
    refreshing = false;
  }
}

后台

后台验证模块

后台验证用户的代码写在    auth/oauth2.py文件中。

获取用户

因为我会使用flask_login来作为一个模拟登录的操作。 后台想要获取用户只需要：

// current_user 就是 微信用户对象
from flask_login import current_user