QQ小程序-用户登录的简单实现

QQ小程序-用户登录

这两天上手了QQ小程序蹭蹭热度，整理了如何使用官方api进行用户登录，希望能帮助到大家。

一、项目选型

前端：uni-app
后端：springboot

二、前端和后端

我们要在页面生命周期的onload时去使用qq官方的api（不绝对，在别的声明周期也均可）

• qq.login是获取用户的code，我们需要用这个code去在后台获取用户的openid等敏感数据，因为用户的敏感数据是无法明文表示的。
• qq.getSetting那段代码是判断是否已经获得用户的授权，可以调用 getUserInfo 获取头像昵称

onLoad() {
			// 查看是否授权
			let that = this
			qq.login({
			  success(res) {
			    if (res.code) {
			      // 发起网络请求
			      uni.request({
			        url: '你的服务器地址/user/onLogin',
			        data: {
			          code: res.code
			        },
					success(res) {
						//此处保存openid
					}
			      })
			    } else {
			      //console.log('登录失败！' + res.errMsg)
			    }
			  }
			})
			qq.getSetting({
				success(res) {
					if (res.authSetting['scope.userInfo']) {
						// 已经授权，可以直接调用 getUserInfo 获取头像昵称
						qq.getUserInfo({
							success(res) {
								//console.log(res.userInfo)
							}
						})
					}
				}
			})
		},

好了code已经传到后端了，那么后端该怎么写呢？
（这里的后端代码效率欠佳，因此只提供简单的一个实现，还要各位自己优化）

@RequestMapping("/onLogin")
  public String onLogin(@RequestParam("code") String code){
Utils utils = new Utils();
    String p = "";
    try{
      p = utils.temp(code);
    }catch (IOException e){
      e.printStackTrace();
    }
    return p;
  }

Utils类是用于来请求远程url获取数据的一个类（此处照搬大佬代码）

package com.example.demo;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;

public class Utils {
  public String temp(String code) throws IOException {
    // 我们需要进行请求的地址：
    //https://api.q.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
    String temp = "https://api.q.qq.com/sns/jscode2session?appid=你的appid&secret=你的appsecret&js_code=" + code+"&grant_type=authorization_code";
    try {
      // 1.URL类封装了大量复杂的实现细节，这里将一个字符串构造成一个URL对象
      URL url = new URL(temp);
      // 2.获取HttpURRLConnection对象
      HttpURLConnection connection = (HttpURLConnection)url.openConnection();
      // 3.调用connect方法连接远程资源
      connection.connect();
      // 4.访问资源数据，使用getInputStream方法获取一个输入流用以读取信息
      BufferedReader bReader = new BufferedReader(
        new InputStreamReader(connection.getInputStream(), "UTF-8"));
      
      // 对数据进行访问
      String line = null;
      StringBuilder stringBuilder = new StringBuilder();
      while ((line = bReader.readLine()) != null) {
        stringBuilder.append(line);
      }
      
      // 关闭流
      bReader.close();
      // 关闭链接
      connection.disconnect();
      // 打印获取的结果
      System.out.println(stringBuilder.toString());
      return stringBuilder.toString();
    } catch (MalformedURLException e) {
      e.printStackTrace();
    }
    return "";
  }
}

然后我们搞一个按钮，参考官方的api可以找到那些参数

<button  
	open-type="getUserInfo"
	@getuserinfo="get" >
	立即登录
</button>

然后绑定的回调函数要自己写。
至此用户的昵称，openid等数据都已经获取到了。
写自己的注册或登录逻辑也很简单了。

get(e) {
				let that = this
				//自己写登录方法
						uni.request({
							url: that.url + 'user/register',
							data: {
								username:res.data,
								nickname:e.detail.userInfo.nickName,
								openid:that.openid,
								password:0
							},
							success: (res) => {
								
							}
						})
			},

大概是下图这种效果，点击完立即登录就会弹出来授权框

三、源码

暂不提供源码，可以私信~