IDEA支付寶小程式開發流程——授權登入

廣州蘆葦科技Java開發團隊發表於2019-01-04

前言

我們都知道，基本99%的物聯網產品的資料都是圍繞使用者來進行的，不言而喻使用者在系統中是必不可少的一個環節。為此，繼上篇的專案搭建之後，本文將給大家演示支付寶小程式授權登入的搭建流程！廢話不多說，直接上程式碼！

前置條件

獲取APPID
新增獲取會員資訊服務詳情 > 開發管理 > 功能列表 > 新增功能 > 勾選獲取會員資訊 > 確認，新增完成後的效果如下圖所示

*PS:如果想獲取手機號和姓名等真實資訊，需要額外申請獲取敏感資訊申請流程
設定祕鑰
- 用阿里的金鑰生成工具生成公私鑰
- 上傳應用公鑰並獲取支付寶公鑰
  - 登入開放平臺-開發者中心，選擇小程式，找到對應的小程式，點選【檢視】>【設定】> 【開發設定】 >【介面加簽方式】 > 【設定應用公鑰】 > 【設定應用公鑰】 > 把簽名驗籤工具裡“公鑰”的內容複製到此處，點選“儲存”完成金鑰設定
儲存成功後頁面變成下圖所示

公鑰用於驗籤使用

伺服器端

在專案的pom.xml中新增服務端SDK

<dependency>
	<groupId>com.alipay.sdk</groupId>
	<artifactId>alipay-sdk-java</artifactId>
	<version>3.4.49.ALL</version>
</dependency>

複製程式碼

在application.yaml檔案中新增appid、公鑰、私鑰的配置

tips: 公鑰不是工具生成的公鑰，而是【公鑰設定成功頁面]裡】點選檢視支付寶公鑰裡獲取的公鑰

讀取配置檔案工具類AliXcxProperty.java

package com.example.demo.properties;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * @Description
 * @Author LW-mochengdong
 * @Date 2018/12/22 11:42
 **/
@Data
@Component
@ConfigurationProperties(prefix = "luwei.ali.xcx")
public class AliXcxProperty {
	private String serverUrl;
	private String appId;
	private String privateKey;
	private String publicKey;
}

複製程式碼

IndexController.java的程式碼

@GetMapping("/auth")
public AlipayUserInfoShareResponse auth(@RequestParam String authcode){
	return indexService.auth(authcode);
}

複製程式碼

IndexService.java

package com.example.demo.service;

import com.alibaba.fastjson.JSONObject;
import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipaySystemOauthTokenRequest;
import com.alipay.api.request.AlipayUserInfoShareRequest;
import com.alipay.api.response.AlipaySystemOauthTokenResponse;
import com.alipay.api.response.AlipayUserInfoShareResponse;
import com.example.demo.properties.AliXcxProperty;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**
 * @Description
 * @Author LW-mochengdong
 * @Date 2018/12/22 11:38
 **/
@Slf4j
@Service
public class IndexService {

	@Resource
	private AliXcxProperty aliXcxProperty;

	public AlipayUserInfoShareResponse auth(String authcode) {
		AlipayClient alipayClient = new DefaultAlipayClient(aliXcxProperty.getServerUrl(),
				aliXcxProperty.getAppId(),
				aliXcxProperty.getPrivateKey(),
				"JSON", "utf-8", aliXcxProperty.getPublicKey(), "RSA2");
		//獲取uid&token
		AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
		request.setGrantType("authorization_code");//值為authorization_code時，代表用code換取；值為refresh_token時，代表用refresh_token換取
		request.setCode(authcode);
		try {
			AlipaySystemOauthTokenResponse response = alipayClient.execute(request);
			if (response.isSuccess()) {
				log.info("auth success [{}]", JSONObject.toJSONString(response));

				AlipayUserInfoShareRequest alipayUserInfoShareRequest = new AlipayUserInfoShareRequest();
				AlipayUserInfoShareResponse alipayUserInfoShareResponse = alipayClient.execute(alipayUserInfoShareRequest, response.getAccessToken());
				if (alipayUserInfoShareResponse.isSuccess()) {
					log.info("AlipayUserInfoShareResponse success [{}]", JSONObject.toJSONString(alipayUserInfoShareResponse));
				} else {
					log.info("AlipayUserInfoShareResponse fail [{}]", JSONObject.toJSONString(alipayUserInfoShareResponse));
				}
				return alipayUserInfoShareResponse;
			} else {
				log.info("auth fail [{}]", JSONObject.toJSONString(response));
			}
		} catch (AlipayApiException e) {
			log.error("auth exception", e);
		}
		return null;
	}

}
複製程式碼

以上，伺服器端的授權登入工作完畢，釋出即可！

客戶端

index.axml檔案

<view>  
  {{index}}  
  <button onTap="index"> 首頁 </button>
  <button onTap="getAuthCode"> 授權 </button>
</view>

複製程式碼

index.js檔案

getAuthCode(){
  my.getAuthCode({
  scopes: 'auth_user', // 主動授權（彈框）：auth_user，靜默授權（不彈框）：auth_base
  success: (res) => {

  if (res.authCode) {
    // 認證成功
    // 呼叫自己的服務端介面，讓服務端進行後端的授權認證，並且種session，需要解決跨域問題
    my.httpRequest({
      url: 'https://app2120230256test.mapp-test.xyz/auth', // 該url是自己的服務地址，實現的功能是服務端拿到authcode去開放平臺進行token驗證
      data: {
        authcode: res.authCode
      },
      success: () => {
        // 授權成功並且伺服器端登入成功
      },
      fail: () => {
        // 根據自己的業務場景來進行錯誤處理
      },
    });
  }
  },
  });
}
複製程式碼