WeChat Webページの開発（3）--WeChatWebページの承認

1.承認とは

まず、承認とは何かを説明します。承認とは、WeChatユーザーを指し、ユーザー関連情報を取得するためにWebページを承認します。

つまり、ユーザーのプライバシー権を保護するために、WeChatの公式は、当社が開発したWebページがデフォルトでユーザー情報を取得することを許可しておらず、ユーザーに許可を与える必要があります。

2.2つの認証方法

snsapi_baseとsnsapi_userinfoの2つの認証方法があります。

snsapi_baseはサイレントに承認され、ユーザーの手動による同意は必要ありませんが、この承認方法ではaccess_tokenとopenIDのみを取得できます。

snsapi_userinfoは、アバター、性別、ニックネームなどのより多くのユーザー情報を取得できますが、ユーザーは手動で認証を確認する必要があります。また、ユーザーが公式アカウントをフォローしている場合、公式アカウントのWebページにアクセスするときにsnsapi_userinfoを使用することもサイレント認証であることに注意してください。WeChatの関係者は、公式アカウントが関係しているため、公式アカウントにはユーザー情報を取得する権利があると考えています。

3.Webページ認証access_tokenおよび通常のaccess_token

これは非常に紛らわしい概念です。通常のaccess_tokenはパブリックアカウントインターフェイスで使用され、Webページ認証access_tokenはWebインターフェイスを呼び出すことで使用されます。これらは同じではなく、機能も異なります。

WeChatについて不平を言い、名前を付けることで開発者を誤解させるのは簡単すぎます。

4.Webページの承認プロセス

WeChat Webページ認証はOAuth2.0を介して実装されており、OAuth2.0のわかりやすいプロセスに精通しています。慣れていない場合は、ここで説明します。理解するのは非常に困難です。

最初のステップは、ユーザーが認証するようにガイドするURLを作成することです。ユーザーが認証した後、認証コードコードが指定したコールバックアドレスに送信されます。

2番目のステップは、コードを介してWebページ認証access_tokenとopenidを取得することです。

3番目のステップは、さまざまなWeChatJSインターフェイスを呼び出すためにJSSDK構成情報を取得することです。

5.Webページ認証コードの開発

5.1プロジェクトの建設

SpringBootプロジェクトを作成し、WeChatパブリックアカウントとWeChat支払いの依存関係を導入します。

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.5.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<groupId>cn.pandabrother</groupId>
	<artifactId>wx-server</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
		<maven-jar-plugin.version>3.0.0</maven-jar-plugin.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>
		<!-- 添加swagger2相关功能 -->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger2</artifactId>
			<version>2.9.2</version>
		</dependency>
		<!-- 添加swagger-ui相关功能 -->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger-ui</artifactId>
			<version>2.9.2</version>
		</dependency>
		<!-- 微信公众号 -->
		<dependency>
			<groupId>com.github.binarywang</groupId>
			<artifactId>weixin-java-mp</artifactId>
			<version>4.1.0</version>
		</dependency>
		<!-- 微信支付 -->
		<dependency>
			<groupId>com.github.binarywang</groupId>
			<artifactId>weixin-java-pay</artifactId>
			<version>4.1.0</version>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

5.2構成ファイルを変更する

構成ファイルapplication.ymlを変更し、パスにアクセスするための起動ポートを設定します。

server:
   port: 80 #端口
   servlet:
      context-path: /wx-server

5.3開発スタートアップクラス

/**
 * SpringBoot启动类
 */
@SpringBootApplication
public class WxServerApplication {
    
    
	public static void main(String[] args) {
    
    
		SpringApplication.run(WxServerApplication.class, args);
	}
}

5.4パブリックアカウント構成クラスの開発

公式アカウントの構成クラスを開発し、公式アカウントのappidやappsecretなどのパラメーターをコンテナーに挿入します。コードxxxを実際のパラメータに置き換える必要があることに注意してください。

/**
 * 微信公众平台配置
 */
@Configuration
public class WxMpConfig {
    
    

	@Bean
	public WxMpDefaultConfigImpl wxMpDefaultConfigImpl() {
    
    
		WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
		config.setAppId("xxx"); // 设置微信公众号的appid
		config.setSecret("xxx"); // 设置微信公众号的app corpSecret
		config.setToken("xxx"); // 设置微信公众号的token
		config.setAesKey("xxx"); // 设置微信公众号的EncodingAESKey
		return config;
	}

	@Bean
	public WxMpService wxMpService() {
    
    
		WxMpService wxMpService = new WxMpServiceImpl();// 实际项目中请注意要保持单例，不要在每次请求时构造实例，具体可以参考demo项目
		wxMpService.setWxMpConfigStorage(wxMpDefaultConfigImpl());
		return wxMpService;
	}
}

5.5コントローラーの開発

WeChatWebページに関連するバックエンドコントローラーWxPageControllerを開発します。

/**
 * 微信网页控制器
 */
@Controller
public class WxPageController {
    
    
	@Autowired
	private WxMpService wxMpService;

	/**
	 * 第一步，引导用户授权
	 */
	@GetMapping("/wxAuth")
	public String wxAuth(HttpServletRequest request) throws Exception {
    
    
		String url = "http://easypanda.oicp.io/wx-server/wxUserInfo";
		String redirectUrl = wxMpService.getOAuth2Service().buildAuthorizationUrl(url, WxConsts.OAuth2Scope.SNSAPI_USERINFO, null);
		return "redirect:" + redirectUrl;
	}

	/**
	 * 第二步，用户授权后，回调该方法，拿到code换取access_token
	 */
	@GetMapping("/wxUserInfo")
	public String userInfo(@RequestParam("code") String code, @RequestParam("state") String state) throws Exception {
    
    
		WxOAuth2AccessToken wxOAuth2AccessToken = wxMpService.getOAuth2Service().getAccessToken(code);
		String openId = wxOAuth2AccessToken.getOpenId();
		// 返回我们开发的网页
		return "redirect:" + "http://easypanda.oicp.io/wx-server/wxpage.html?openid=" + openId;
	}

	/**
	 * 第三步,获取JSSDK配置信息
	 */
	@GetMapping("/wxJsapiSignature")
	@ResponseBody
	public WxJsapiSignature wxJsapiSignature(String url) throws Exception {
    
    
		return wxMpService.createJsapiSignature(url);
	}

}

ここでは、パブリックネットワークからアクセス可能なドメイン名アドレスをここのWebページアドレスに使用し、イントラネットの浸透がここで使用されていることに注意してください。パブリックネットワークサーバーがある場合は、パブリックネットワークサーバーを使用して直接テストすることもできます。

5.6Webページの開発とテスト

テストの便宜のために、リソースディレクトリに静的フォルダを作成し、wxpage.htmlページを作成します。

<html>
<head>
<meta charset="utf-8">
</head>
<body>
	hello
</body>
</html>

6.テスト

6.1Webページ認証テスト

http://easypanda.oicp.io/wx-server/wxAuth開発者ツールを開き、ユーザーに認証を案内するアドレスを入力すると、開発者ツールのプロンプトが表示され

ます。公式アカウントにログインし、[設定と開発]-[公式アカウント設定]-[機能]に現在のドメイン名を追加します。設定]-[ウェブページ認証ドメイン名]。ここからtxtファイルをダウンロードして、ドメイン名のルートディレクトリに配置する必要があることに注意してください。

このとき、もう一度やり直してください。このときの方法はSNSAPI_USERINFO、WeChatがユーザーに承認

を通知することです。これをSNSAPI_BASEに置き換えて、もう一度承認をリクエストします。この時点で、指定したWebページに直接入力できます。

6.2ユーザーコードテストを取得する

指定されたWebページにアクセスした後、アドレスバーにリダイレクトアドレスをコピーします。

http://easypanda.oicp.io/wx-server/wxpage.html?openid=oINiq6UqTiKqfXN3H6RmeKvvRnmw

ユーザーのopenidが正常に取得されたことがわかります。つまり、ユーザーが承認された後、自動的にwxUserInfoメソッドに転送され、コードパラメーターが渡されます。

6.3JSSDK構成情報テストの取得

このときhttp://easypanda.oicp.io/wx-server/wxJsapiSignature、次のようにJSSDK構成情報にアクセスできます。

{
    
    "appId":"wxa0168d6e3b5547ff","nonceStr":"AbMcd6UcZNgmBcSa","timestamp":1643016353,"url":null,"signature":"91073ffc3ef83f88908356be7fbee0c01a65c5ff"}

この構成情報からJSSDKを呼び出すことができます。

7.ローカルアドレステストの問題

アクセスすることはできますhttp://127.0.0.1/wx-server/wxAuthが、コールバックアドレスがローカルアドレスを入力すると、WeChatはredirect_uriパラメーターが間違っていることを示すプロンプトを表示するため、ローカルアドレスを使用してテストするのは不便です。

8.まとめ

WeChat Webページ認証のプロセスは確かに非常に複雑ですが、この機能はより重要です。これには、Webページ認証も必要なフォローアップWeChatパブリックアカウント支払いの開発が含まれます。

さらに、ほとんどの場合、SNSAPI_BASE認証方法を使用でき、認証のポップアッププロンプトよりもサイレントエクスペリエンスの方が優れています。