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


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 相关文章推荐
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
jquery延迟对象解析
2016/10/26 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python数组复制拷贝的实现方法
2015/06/09 Python
Python进程池Pool应用实例分析
2019/11/27 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python实现AI换脸功能
2020/04/10 Python
python-地图可视化组件folium的操作
2020/12/14 Python
会计专业应届生求职信
2013/11/24 职场文书
公司办公室岗位职责
2014/03/19 职场文书
英文自荐信常用句子
2014/03/26 职场文书
初三学生个人自我评定
2014/04/06 职场文书
1亿有多大教学反思
2014/05/01 职场文书
签约仪式策划方案
2014/06/02 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
企业计划生育责任书
2015/05/09 职场文书
安全第一课观后感
2015/06/18 职场文书
早上好问候语大全
2015/11/10 职场文书