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


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 相关文章推荐
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
vue cli 全面解析
Feb 28 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
文本加密解密
2006/06/23 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
基于python plotly交互式图表大全
2019/12/07 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
人事任命书范文
2014/06/04 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL