Connect Apps to WeChat
Last updated
Last updated
To create a website application in WeChat, you can choose to setup a website application and wait for approval or a sandbox account for testing.
Register an account in WeChat Open Platform.
Create Website Application (网站应用), fill in information and wait for approval (It may take few days).
View the application detail page, obtain the "AppID" and "AppSecret" on the top of the application page.
Go to Account Center > Basic information, to obtain the "原始ID".
Use your WeChat app to login in 微信公众平台接口测试帐号申请.
Obtain the "appID", "appSecret" and "原始ID". The "原始ID" is the "微信号" in the top right corner.
Fill in 接口配置信息. The URL must be pointing at a publicly reachable server. The token is a string of your choice.
Implement the 接口配置信息 server. Here is an example written in Golang.
Fill in JS接口安全域名. The value is your Authgear domain name plus port, e.g. 192.168.2.88:3000
or myapp.authgear.cloud
Fill in 网页授权获取用户基本信息. The value is your Authgear domain name plus port, e.g. 192.168.2.88:3000
or myapp.authgear.cloud
Look for an QR code in the sandbox settings page. You must scan it with your Wechat app and follow the sandbox account.
In the portal, do the following:
In the portal, go to Authentication > Social / Enterprise Login.
Enable Sign in with WeChat (Web/网站应用).
Fill in Client ID with the AppID.
Fill in Client Secret with the AppSecret.
Fill in 原始 ID with the 原始 ID.
Check the checkbox Is Sandbox account if you are using sandbox account.
Save the settings.
Wechat integration is a bit more complicated then other social login, here are the overview of what needs to be done:
Register an account and create mobile application in WeChat Open Platform. Approval is needed in this process.
Enable and configure WeChat Login in Authgear portal.
Include Authgear SDK on your app.
Implement a delegate function to be triggered when user clicks the "Login with WeChat" button during authorization. You need to integrate WeChat SDK to open WeChat app to perform authentication in the delegate function (we have sample code below). After obtaining the authorization code from WeChat, call the Authgear callback with the auth code and complete the "Login With WeChat" process.
Here are the detailed steps for iOS, Android, React Native, and Flutter.
Register an account in WeChat Open Platform.
Create Mobile Application (移动应用), fill in information and wait for approval (It may take few days).
View the application detail page, obtain the AppID
and AppSecret
on the top of the page.
Go to Account Center > Basic information, to obtain the "原始ID".
Save those values, we will need them in the section below.
Setup Authgear iOS SDK.
Follow iOS接入指南 to setup WeChat SDK. For the coding part, we will further explain in the below steps.
WechatOpenSDK
is Objective-C library. If you are using swift. You will need to create bridging header. To setup bridge header, please check Importing Objective-C into Swift. Here is the example WechatOpenSDK-Bridging-Header.h
.
After setting up the WechatOpenSDK
, universal link should be enabled in your application. We will need two links for the setup. One is for the WeChat SDK used, another is for the Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here are the suggestion of the links.
WECHAT_UNIVERICAL_LINK: https://{YOUR_DOMAIN}/wechat
WECHAT_REDIRECT_URI_FOR_AUTHGEAR: https://{YOUR_DOMAIN}/open_wechat_app
Login WeChat Open platform, open the application detail page, update the development information iOS section.
Fill in "Bundle ID" field with your app bundle id.
Fill in "Universal Links" with "WECHAT_UNIVERICAL_LINK" above.
Go to Authgear portal, do the following:
In the portal, go to Authentication > Social / Enterprise Login.
Enable Sign in with WeChat (Mobile/移动应用).
Fill in Client ID with the AppID.
Fill in Client Secret with the AppSecret.
Fill in 原始 ID with the 原始 ID.
Add WECHAT_REDIRECT_URI_FOR_AUTHGEAR above in WeChat redirect URIs.
Save the settings.
Update the code
Setup WeChat SDK when app launch
Setup Authgear delegate and call WeChat SDK when sendWechatAuthRequest
is triggered
Handle universal link
Provide wechatRedirectURI
when calling authenticate
and promoteAnonymousUser
in authgear sdk
Here is the completed example.
Setup Authgear iOS SDK.
Follow Android接入指南 to setup Wechat SDK. For the coding part, we will further explain in the below steps.
Login WeChat Open platform, open the application detail page, update the development information Android section.
Fill in application signature, you can obtain it with command keytool -list -v -keystore YOUR_KEYSTORE_FILE_PATH
. WeChat needs the certificate fingerprint in MD5, remove :
in the fingerprint. It should be string in length 32.
Fill in your package name
We will need to define a custom url for Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here is the example, you should update it with your own scheme.
"WECHAT_REDIRECT_URI_FOR_AUTHGEAR": com.myapp://host/open_wechat_app
Go to Authgear portal, do the following:
In the portal, go to Authentication > Social / Enterprise Login.
Enable Sign in with WeChat (Mobile/移动应用).
Fill in Client ID with the AppID.
Fill in Client Secret with the AppSecret.
Fill in 原始 ID with the 原始 ID.
Add WECHAT_REDIRECT_URI_FOR_AUTHGEAR above in WeChat redirect URIs.
Save the settings.
Update the code
Update application AndroidManifest.xml
Configure WeChat SDK
Setup Authgear delegate
Create wxapi directory in the directory named after your package name and create WXEntryActivity
activity. In WXEntryActivity
, pass the received intent and the object that implements IWXAPIEventHandler API to the handleIntent
method of the IWXAPI
API, as shown below:
You will be able to receive the authentication code and state in onResp
method, call Authgear wechatAuthCallback
with code
and state
.
Provide wechatRedirectURI
when calling authorize
and promoteAnonymousUser
in Authgear SDK.
Here is the completed example.
Setup Authgear SDK
Follow iOS接入指南 and Android接入指南 to setup WeChat SDK. For the coding part, we will further explain in the below steps.
In iOS, after setting up the WechatOpenSDK, universal link should be enabled in your application. We will need two links for the setup. One is for the WeChat SDK used, another is for the Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here are the suggestion of the links.
IOS_WECHAT_UNIVERSAL_LINK: https://{YOUR_DOMAIN}/wechat
IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: https://{YOUR_DOMAIN}/open_wechat_app
In android, you need to sign your app to use WeChat SDK. Obtain your application signature by running command keytool -list -v -keystore YOUR_KEYSTORE_FILE_PATH
with your keystore file. WeChat needs the certificate fingerprint in MD5, remove :
in the fingerprint. It should be string in length 32.
Login WeChat Open platform, open the application detail page, update the development information iOS and Android sections.
In iOS
Fill in "Bundle ID" field with your app bundle id.
Fill in "Universal Links" with "IOS_WECHAT_UNIVERSAL_LINK" above.
In Android
Fill in application signature.
Fill in your package name
For android, we will need to define a custom url for Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here is the example, you should update it with your own scheme.
ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: com.myapp://host/open_wechat_app
Login Authgear portal, go to "Single-Sign On" page, then do the following:
Enable "Sign in with WeChat (Mobile/移动应用)"
Fill in "Client ID" with the WeChat "AppID".
Fill in "Client Secret" with the WeChat "AppSecret".
Fill in "原始 ID" with the WeChat "原始 ID".
Add "IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" and "ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" above into "WeChat redirect URIs"
Click save.
Update the code
In Android, Update application AndroidManifest.xml
.
In iOS, update your App Delegate
Provide wechatRedirectURI
when calling Authgear SDK authorize
and promoteAnonymousUser
in js
Setup Authgear delegate and open WeChat SDK when sendWechatAuthRequest is triggered
Implement the NativeModules to use WeChat SDK to open WeChat app for authorization. Here is the completed example.
Setup Authgear SDK
Follow iOS接入指南 and Android接入指南 to setup WeChat SDK. For the coding part, we will further explain in the below steps.
In iOS, after setting up the WechatOpenSDK, universal link should be enabled in your application. We will need two links for the setup. One is for the WeChat SDK used, another is for the Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here are the suggestion of the links.
IOS_WECHAT_UNIVERSAL_LINK: https://{YOUR_DOMAIN}/wechat
IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: https://{YOUR_DOMAIN}/open_wechat_app
In android, you need to sign your app to use WeChat SDK. Obtain your application signature by running command keytool -list -v -keystore YOUR_KEYSTORE_FILE_PATH
with your keystore file. WeChat needs the certificate fingerprint in MD5, remove :
in the fingerprint. It should be string in length 32.
Login WeChat Open platform, open the application detail page, update the development information iOS and Android sections.
In iOS
Fill in "Bundle ID" field with your app bundle id.
Fill in "Universal Links" with "IOS_WECHAT_UNIVERSAL_LINK" above.
In Android
Fill in application signature.
Fill in your package name
For android, we will need to define a custom url for Authgear SDK to trigger delegate function when user click "Login with WeChat" button. Here is the example, you should update it with your own scheme.
ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR: com.myapp://host/open_wechat_app
Login Authgear portal, go to "Single-Sign On" page, then do the following:
Enable "Sign in with WeChat (Mobile/移动应用)"
Fill in "Client ID" with the WeChat "AppID".
Fill in "Client Secret" with the WeChat "AppSecret".
Fill in "原始 ID" with the WeChat "原始 ID".
Add "IOS_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" and "ANDROID_WECHAT_REDIRECT_URI_FOR_AUTHGEAR" above into "WeChat redirect URIs"
Click save.
Update the code
In Android, Update application AndroidManifest.xml
.
Provide wechatRedirectURI
.
Provide sendWechatAuthRequest
Implement the platform specific code to use WeChat SDK to open WeChat app for authorization. Here is the completed example.