首页 > 编程语言 >小程序授权登录前后端对接及用户信息完善

小程序授权登录前后端对接及用户信息完善

时间:2024-09-07 22:14:26浏览次数:7  
标签:String 登录 url 对接 用户 params new 授权 response

对接后台登录流程

微信官方早都已经禁止开发者直接通过 api 获取用户信息数据了,大家拿个用户的 openid 注册好,剩下的让用户填写就行了。

先上官方的经典登录流程图:

登录流程时序

步骤拆分解析:

  1. 前端通过 调用官方 API wx.login,将回调中的 code 临时登陆凭证传递给(请求)后台
  2. 后台去请求微信的接口 https://api.weixin.qq.com/sns/jscode2session。具体用法参考 官方文档
  3. 后台请求该接口的响应成功的数据中可以拿到两个值 openidsession_key其中 openid 是唯一值,可以当作用户标识,比如判断该用户是否存在,是否注册该用户等。session_key 自行处理。

如果需要获取用户信息(现在用户信息毛都没有,获取也没用,别获取了),需要在 wx.login 之前调用 wx.getUserProfilerawDatasignature 联合 code 一并传递给后台,后台通过 session_keyrawData反解析 signature 的正确性。

根据现在微信官方的说法,注册时添加微信用户真实信息(头像昵称)是不可能的,前后端交互时,通过 wx.login 传递一个 code 仅注册就可以,其它参数目前完全没用

前端代码

不是我不用 wx.getUserProfile,而是这个 api 真没啥信息可获取了,老老实实拿个 openid 注册就行了。

wx.login({
  success(res) {
    wx.request({
      url: 'http://localhost:8888/testApi/wx/login',
      data: {
        // encryptedData 和 iv 是用来解析私密用户信息的,但是现在啥也获取不到了,所以没用
        code: res.code,
        // encryptedData: InfoRes.encryptedData,
        // iv: InfoRes.iv,
        // rawData: InfoRes.rawData,
        // signature: InfoRes.signature,
      },
    }).then((res) => {
      // 登录认证成功,后台一般会返回登陆凭证(token),存储使用即可
    });
  },
  fail(err) {
    console.log(err.errMsg);
  },
});

后端代码

请求第三方(微信)示例

请求第三方接口,这里给出两种获取第三方接口的代码方式,任选其中一种即可。

  1. pom 中集成 httpclient 包。

HttpClientUtils.java

public class HttpClientUtil {
    public static String doGet(String url, Map<String, String> param) {

        // 创建Httpclient对象
        CloseableHttpClient httpclient = HttpClients.createDefault();

        String resultString = "";
        CloseableHttpResponse response = null;
        try {
            // 创建uri
            URIBuilder builder = new URIBuilder(url);
            if (param != null) {
                for (String key : param.keySet()) {
                    builder.addParameter(key, param.get(key));
                }
            }
            URI uri = builder.build();

            // 创建http GET请求
            HttpGet httpGet = new HttpGet(uri);

            // 执行请求
            response = httpclient.execute(httpGet);
            // 判断返回状态是否为200
            if (response.getStatusLine().getStatusCode() == 200) {
                resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (response != null) {
                    response.close();
                }
                httpclient.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return resultString;
    }

    public static String doGet(String url) {
        return doGet(url, null);
    }

    public static String doPost(String url, Map<String, String> param) {
        // 创建Httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        CloseableHttpResponse response = null;
        String resultString = "";
        try {
            // 创建Http Post请求
            HttpPost httpPost = new HttpPost(url);
            // 创建参数列表
            if (param != null) {
                List<NameValuePair> paramList = new ArrayList<>();
                for (String key : param.keySet()) {
                    paramList.add(new BasicNameValuePair(key, param.get(key)));
                }
                // 模拟表单
                UrlEncodedFormEntity entity = new UrlEncodedFormEntity(paramList);
                httpPost.setEntity(entity);
            }
            // 执行http请求
            response = httpClient.execute(httpPost);
            resultString = EntityUtils.toString(response.getEntity(), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                response.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return resultString;
    }

    public static String doPost(String url) {
        return doPost(url, null);
    }

    public static String doPostJson(String url, String json) {
        // 创建Httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        CloseableHttpResponse response = null;
        String resultString = "";
        try {
            // 创建Http Post请求
            HttpPost httpPost = new HttpPost(url);
            // 创建请求内容
            StringEntity entity = new StringEntity(json, ContentType.APPLICATION_JSON);
            httpPost.setEntity(entity);
            // 执行http请求
            response = httpClient.execute(httpPost);
            resultString = EntityUtils.toString(response.getEntity(), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                response.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return resultString;
    }
}

使用

Map<String, String> params = new HashMap<>();
// .... 参数添加 params.put("...","...")
String s = HttpClientUtil.doPost(url, params);
SONObject object = JSON.parseObject(s);
  1. 使用 Springboot 自带的 RestTemplate

RestTemplateUtil

public class RestTemplateUtil {
    public static JSONObject doPost(String url, MultiValueMap<String, Object> param){
        RestTemplate restTemplate=new RestTemplate();
        String s = restTemplate.postForObject(url, param, String.class);
        return JSONObject.parseObject(s);
    }
}

使用

MultiValueMap<String, Object> params = new LinkedMultiValueMap<>();
// .... 参数添加 params.add("...","...")
JSONObject object = RestTemplateUtil.doPost(url, params);

登录流程对接

// 现在 rawData 和 signature 已经没什么用了,所以这两个参数相关的逻辑可以删除,此处保留仅做记录
public R wxLogin(String code) {
    String url = "https://api.weixin.qq.com/sns/jscode2session";
    MultiValueMap<String, Object> params = new LinkedMultiValueMap<>();
    params.add("appid",appid);
    params.add("secret",secret);
    params.add("js_code",code);
    params.add("grant_type",grantType);
    JSONObject object = RestTemplateUtil.doPost(url, params);
    System.out.println(object);
    //接收微信接口服务 获取返回的参数,这里拿到 openid 就足够了,后边的签名校验没啥必要
    String openid = object.getString("openid");
    String sessionKey = object.getString("session_key");
    //校验签名 小程序发送的签名signature与服务器端生成的签名signature2 = sha1(rawData + sessionKey)
    // String signature2 = DigestUtils.sha1Hex(rawData + sessionKey);
    // System.out.println(signature2);
    // System.out.println(openid);
    // if(!signature.equals(signature2)){
    //     return R.fail("签名校验失败");
    // }
    // SONObject rawDataJson = JSONObject.parseObject(rawData);
    // return R.ok(rawDataJson);

    // --------这里可以使用 openid 判断用户是否注册,将用户信息插入数据库
}

获取用户信息

通过 API 调用方式直接获取用户信息的方式已经完全没有了,只能让用户自己手动完善个人信息,类似于表单填写,但在此基础上,微信官方提供了相应的开放能力。

此处使用原生的小程序做示例,Taro 和 uniapp 的使用逻辑相同。

获取用户昵称

小程序的 input 组件配置 type="nickname"

<input type="nickname" model:value="{{ nameValue }}" placeholder="请输入昵称" />
Page({
  data: {
    nameValue: '',
  },

  onl oad(options) {
    const { name } = options;
    this.setData({
      nameValue: name,
    });
  },

  onSubmit() {
   // 此处可将填充的用户昵称提交给后端做更新
    console.log(this.data.nameValue);
  },
});

获取用户昵称示意图

获取用户头像

小程序的 button 组件需设置 open-type="chooseAvatar",并绑定对应的事件,获取用户的(上传)头像临时地址,将其传给后端进行信息保存。

<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image src="{{ avatarUrl }}" />
</button>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },

  async onChooseAvatar(e) {
    const { avatarUrl = '' } = e.detail;
    const { data, code } = await uploadImg(avatarUrl);  // 此处将头像上传到后端,并返回图片 url 地址
    code === 200 &&
      this.setData({
        avatarUrl: data,
      });
  },
});

获取用户头像示意图

标签:String,登录,url,对接,用户,params,new,授权,response
From: https://www.cnblogs.com/jsonq/p/18402233

相关文章

  • 码闪付对接易支付图文教程!
    1.后台新增支付接口2.新增支付通道3.配置密匙4.填写密匙以上就是易支付接入码闪付的全部教程,码闪付(www.mashanfu.cn)注册就不说了,这个很简单,注册个帐号就行了,这样你就可以使用你的易支付收款了,当然也可以给别人使用!......
  • 轻松搞定用户认证:微搭低代码平台打造完美登录体验01用户登录
    目录1创建数据源2搭建后端API3用户登录4最终的代码总结欢迎阅读我们的微搭低代码全栈开发课程,这是我们的第二篇。在第一篇中我们整体描述了小程序的功能结构,这一篇我们就进入实际的开发。在开发小程序的时候,第一个需要考虑的就是用户如何注册和登录。我们在日......
  • UltraCompare 24.0 (文件比较) 中文授权版
    UltraCompare是一款文件比较工具,可以对文件、文件夹和压缩文件进行比对或者合并。UltraCompare(Windows系统)不仅能用于高度相似文本的比较(也就是文章结构、内容等一致,仅存在一些小差异),还能用于一些仅包含部分相似内容的文本比较。该版本已授权,可以使用全部功能。软件截图:使......
  • 29精简网课授权版教学
    1.准备一台服务器,去阿里云白嫖一年,不会的牛子解决2.再服务器上面安装宝塔面板 【小白必看】五分钟安装宝塔面板搭建服务器不求人_哔哩哔哩_bilibili3.安装完成后,即可在域名根目录上传源码(在上传源码之前,要进行域名授权,不授权打不开网站)4.源码上传服务器解压完毕后,打开......
  • [HarmonyOS Next示例代码]用户认证登录
    HarmonyOS next示例代码全集UserAuth:本示例主要使用人脸和指纹认证用户身份、使用密码保险箱实现密码自动填充以及涉及口令输入的应用界面防截屏或录屏等功能的实现方式。用户认证登录介绍本示例主要使用人脸和指纹认证用户身份、使用密码保险箱实现密码自动填充以及涉......
  • 【第97课】云上攻防-云原生篇&Kubernetes&K8s安全&API&Kubelet未授权访问&容器执行
    免责声明本文发布的工具和脚本,仅用作测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断。如果任何单位或个人认为该项目的脚本可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明,我们将在收到认证文件后删除相关内容。文中所涉......
  • 单点登录SSO
    单点登录(SingleSign-On,简称SSO)是一种会话和用户身份验证技术,它允许用户通过一次登录访问多个应用程序和服务。什么是单点登录?单点登录是指用户只需要在一个地方(如一个网站或一个应用程序)进行一次身份验证(通常是通过用户名和密码),就可以在不需要再次输入凭证的情况下访问多......
  • API 网关 OpenID Connect 实战:单点登录(SSO)如此简单
    作者:戴靖泽,阿里云API网关研发,Higress开源社区Member前言随着企业的发展,所使用的系统数量逐渐增多,用户在使用不同系统时需要频繁登录,导致用户体验较差。单点登录(SingleSign-On,简称SSO)正是为了解决这一问题。当用户登录一次后,即可获取所有系统的访问权限,不需要对每个单一系统逐......
  • API 网关 OpenID Connect 实战:单点登录(SSO)如此简单
    作者:戴靖泽,阿里云API网关研发,Higress开源社区Member前言随着企业的发展,所使用的系统数量逐渐增多,用户在使用不同系统时需要频繁登录,导致用户体验较差。单点登录(SingleSign-On,简称SSO)正是为了解决这一问题。当用户登录一次后,即可获取所有系统的访问权限,不需要对每个单一系......
  • CSDN免登录复制
    一、1.打开开发人员工具2.找到对应元素二、1.打开开发人员工具,进入控制台2.输入doucument.designMode='on'结果图:3.选中,打印输出PDF效果图:ps:效果图:......