小程序登录之支付宝授权的实现示例


Posted in Javascript onDecember 13, 2019

众所周知,微信小程序是可以通过微信本身授权后再登录,平台可以拿到微信用的的账号相关信息,然后保存到数据库中,那么同理在支付宝小程序开发过程中,登录功能的设计也可以如此

小程序登录之支付宝授权的实现示例

上图是官方提供的时序图,具体看一下流程:

在小程序端获取 auth_code,目的是获取用户授权码

把第一步获取的授权码 auth_code 传到咱们自己的后台,也就是说后台需要编写一个接口,方便小程序端的传入

var me = this;
  my.getAuthCode({
   scopes: 'auth_user', // 主动授权(弹框):auth_user,静默授权(不弹框):auth_base
   success: (res) => {
    if (res.authCode) {
     // console.log(app.serverUrl + '/login/' + res.authCode);
     // 调用自己的服务端接口,让服务端进行后端的授权认证
     my.httpRequest({
      url: app.serverUrl + '/login/' + res.authCode,
      method: 'POST',
      header:{
       'content-type': 'application/json'
      },
      dataType: 'json',
      success: (res) => {
       // 授权成功并且服务器端登录成功
       console.log(res);
       me.setData({
        userInfo: res.data.data
       });
      }
     });
    }
   },
  });

后台拿到这个 auth_code 之后,需要调用支付宝的授权平台,从而获取用户的唯一 token 以及 支付宝的userid,都是唯一的,调用的接口为 [alipay.system.oauth.token]

获取到userid后,判断一下这个userid是否在我们自己的数据库中存在,如果存在,直接获取信息,并且直接返回用户对象到前台;如果不存在,则需要从支付宝授权平台再一次去获取支付宝用户的信息。

​调用 [alipay.user.info.share],获取用户信息,这个用户对象里包含了大量的用户真实信息,具体参考如下

@Autowired
  private UserService userService;

  @ApiOperation(value = "统一登录接口", notes = "支付宝小程序唤起登录后调用", httpMethod = "POST")
  @PostMapping("/login/{authCode}")
  public IMoocJSONResult items(
      @ApiParam(name = "authCode", 
      value = "授权码", 
      required = true, 
      example = "授权码") @PathVariable String authCode) throws Exception {

    // 1. 服务端获取access_token、user_id
    AlipaySystemOauthTokenResponse response = getAccessToken(authCode);
    if (response.isSuccess()) {
      System.out.println("获取access_token - 调用成功");
      /**
       * 获取到用户信息后保存到数据
       * 1. 如果数据库不存在对用的 alipayUserId, 则注册
       * 2. 如果存在,则获取数据库中的信息再返回
       */
      String accessToken = response.getAccessToken();
      String alipayUserId = response.getUserId();
      System.out.println("accessToken:" + accessToken);
      System.out.println("alipayUserId:" + alipayUserId);
      
      // 2. 查询该用户是否存在
      Users userInfo = userService.queryUserIsExist(alipayUserId);
      if (userInfo != null) {
        // 如果用户存在,直接返回给前端,表示登录成功
        return IMoocJSONResult.ok(userInfo);
      } else {
        // 如果用户不存在,则通过支付宝api获取用户的信息后,再注册用户到自己平台数据库
        // 获取会员信息
        AlipayUserInfoShareResponse aliUserInfo = getAliUserInfo(accessToken);
        if (aliUserInfo != null) {
           Users newUser = new Users();
           newUser.setAlipayUserId(alipayUserId);
           newUser.setNickname(aliUserInfo.getNickName());
           newUser.setRegistTime(new Date());
           newUser.setIsCertified(aliUserInfo.getIsCertified().equals("T") ? 1 : 0);
           newUser.setFaceImage(aliUserInfo.getAvatar());
           userService.createUser(newUser);
           return IMoocJSONResult.ok(newUser);
        }
      }
    } else {
      System.out.println("获取access_token - 调用失败");
    }
    return IMoocJSONResult.ok();
  }
  
  // 服务端获取access_token、user_id
  private AlipaySystemOauthTokenResponse getAccessToken(String authCode) throws Exception {
    AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do", 
        APPID,          // 1. 填入appid
        PRIVATE_KEY,      // 2. 填入私钥 
        "json", 
        "GBK", 
        ALIPAY_PUBLIC_KEY,     // 3. 填入公钥
        "RSA2");
    AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
    request.setGrantType("authorization_code");
    request.setCode(authCode);    // 4. 填入前端传入的授权码authCode
    request.setRefreshToken("201208134b203fe6c11548bcabd8da5bb087a83b");  // 0. 不用管
    AlipaySystemOauthTokenResponse response = alipayClient.execute(request);

    return response;
  }
    
  // 获取支付宝用户信息
  private AlipayUserInfoShareResponse getAliUserInfo (String accessToken) throws Exception {
    AlipayClient alipayClient = new DefaultAlipayClient("https://openapi.alipay.com/gateway.do",
        APPID,          // 1. 填入appid
        PRIVATE_KEY,      // 2. 填入私钥 
        "json", 
        "GBK", 
        ALIPAY_PUBLIC_KEY,     // 3. 填入公钥
        "RSA2");
    AlipayUserInfoShareRequest request = new AlipayUserInfoShareRequest();
    AlipayUserInfoShareResponse response = alipayClient.execute(request, accessToken);
    if(response.isSuccess()){
      System.out.println("获取会员信息 - 调用成功");
      return response;
    }

    return null;
  }

拿到的支付宝用户信息如图:

小程序登录之支付宝授权的实现示例

最终页面的展示效果为:

小程序登录之支付宝授权的实现示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 #Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
使用uni-app开发微信小程序的实现
Dec 13 #Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 #Javascript
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
33道php常见面试题及答案
2015/07/06 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JS高级运动实例分析
2016/12/20 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python yield的用法实例分析
2020/03/06 Python
django model通过字典更新数据实例
2020/04/01 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
公司清洁工岗位职责
2013/12/14 职场文书
水电维修专业推荐信
2014/09/06 职场文书
客户答谢会致辞
2015/01/20 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技