WeChat Login Setup
This guide covers setting up WeChat Login (微信登录) for your application, enabling authentication for users in the Chinese market.
Prerequisites
- WeChat Open Platform account (微信开放平台)
- Business license for verification
- Access to WeChat Open Platform
Step 1: Register on WeChat Open Platform
- Go to WeChat Open Platform
- Click 注册 (Register) if you don't have an account
- Complete email verification
- Fill in developer information
Account Verification
For full access, complete account verification:
- Go to 账号中心 (Account Center)
- Click 开发者资质认证 (Developer Verification)
- Submit required documents:
- Business license
- Contact information
- Authorization letter
Note: Verification typically takes 3-5 business days and costs ¥300/year.
Step 2: Create an Application
For Mobile Apps
- Go to 管理中心 (Management Center)
- Click 移动应用 (Mobile Applications)
- Click 创建移动应用 (Create Mobile App)
- Fill in application details:
| Field | Description |
|---|---|
| 应用名称 | App name in Chinese |
| 应用简介 | App description |
| 应用官网 | Your website URL |
| APP图标 | App icon (28x28 to 120x120) |
- Submit for review
For iOS Apps
Add iOS platform information:
- Bundle ID:
com.yourcompany.myapp - App Store download link (if published)
- Universal Links support
For Android Apps
Add Android platform information:
- Package Name:
com.yourcompany.myapp - App Signature (MD5, lowercase, no colons)
- Download link
For Websites
- Go to 网站应用 (Website Applications)
- Click 创建网站应用 (Create Website App)
- Fill in website details:
- Domain name
- Website introduction
- Authorization callback domain
Step 3: Get Application Credentials
After approval:
- Go to your application details
- Note down:
- AppID - Application identifier
- AppSecret - Application secret (click to reveal)
Warning: Keep your AppSecret secure. Reset it immediately if compromised.
Step 4: Configure Authorization
For Website Applications
- In application settings, find 接口权限 (API Permissions)
- Apply for 网页授权获取用户基本信息 (Web Authorization)
- Configure authorization callback domain:
- Domain only (no protocol):
yourdomain.com - Must be ICP registered domain in China
For Mobile Applications
Permissions are granted based on verification level:
- 未认证 (Unverified): Basic login only
- 已认证 (Verified): Full user info access
Step 5: Configure in OpenDev
- Log in to OpenDev Platform
- Navigate to OAuth Channels
- Add or edit the WeChat OAuth channel
- Enter your configuration:
{
"provider": "wechat",
"appId": "wx1234567890abcdef",
"appSecret": "YOUR_APP_SECRET",
"scopes": ["snsapi_login"],
"callbackUrl": "https://yourdomain.com/auth/callback?provider=wechat"
}
Note:
- The unified callback URL format is
/auth/callback?provider=wechat(GET/POST method).- The
appSecretshould be encrypted before storing in the database.- Field name aliases supported:
clientIdforappId,clientSecretforappSecret.
Configuration Fields
| Field | Required | Description |
|---|---|---|
| App ID | Yes | WeChat AppID (alias: clientId) |
| App Secret | Yes | WeChat AppSecret (alias: clientSecret) |
| Scopes | Yes | Authorization scope |
| Callback URL | Yes | Your callback URL |
Scope Options
| Scope | Description |
|---|---|
| snsapi_base | Silent auth, only get openid |
| snsapi_userinfo | Get user info (requires user consent) |
| snsapi_login | Website login (full user info) |
Step 6: Implement WeChat Login
Web Authorization Flow
1. Redirect user to:
https://open.weixin.qq.com/connect/qrconnect?
appid=APPID&
redirect_uri=CALLBACK_URL&
response_type=code&
scope=snsapi_login&
state=STATE#wechat_redirect
2. User scans QR code with WeChat
3. Receive callback with code:
https://yourdomain.com/callback?code=CODE&state=STATE
4. Exchange code for access_token
5. Get user info with access_token
Mobile Authorization Flow
For mobile apps, use WeChat SDK:
// iOS
let req = SendAuthReq()
req.scope = "snsapi_userinfo"
req.state = "your_state"
WXApi.send(req)
// Android
val req = SendAuth.Req()
req.scope = "snsapi_userinfo"
req.state = "your_state"
api.sendReq(req)
Step 7: Test the Integration
Testing Notes
- Test Environment: Use WeChat Sandbox for development
- Test Accounts: Add test accounts in Open Platform
- Real Device: WeChat login requires actual WeChat app
Sample OAuth Response
{
"provider": "wechat",
"providerId": "oWv1234567890ABCDEF",
"unionId": "o6_bmjrPTlm6_2sgVt7hMZOPfL2M",
"nickname": "用户昵称",
"avatar": "https://thirdwx.qlogo.cn/...",
"gender": 1,
"province": "广东",
"city": "深圳"
}
UnionID vs OpenID
| Identifier | Scope | Usage |
|---|---|---|
| OpenID | Per application | Identify user in one app |
| UnionID | Across all apps | Link user across your apps |
Tip: Always store UnionID if available for cross-app user identification.
Troubleshooting
Error: redirect_uri 参数错误
Solutions:
- Callback domain must exactly match registered domain
- No protocol in registered domain (use
domain.comnothttps://domain.com) - Domain must have valid ICP registration
Error: invalid appid
Solutions:
- Check AppID is correct
- Ensure application is approved
- Verify you're using correct environment (sandbox vs production)
Error: scope 参数错误
Solutions:
- Use
snsapi_loginfor website applications - Use
snsapi_userinfofor mobile apps - Ensure permission is granted in Open Platform
QR Code Not Loading
Solutions:
- Check if WeChat JS SDK is loaded
- Verify domain is whitelisted
- Check browser console for errors
China-Specific Considerations
ICP Registration
- Website domain must have valid ICP (Internet Content Provider) registration
- ICP number should be displayed on website footer
Data Privacy
- Comply with China's Personal Information Protection Law (PIPL)
- Store user data in servers located in China if required
- Provide privacy policy in Chinese
User Experience
- Provide Chinese language support
- Consider WeChat Mini Program for deeper integration
- Support both QR code and in-app authorization
Security Best Practices
- Validate State Parameter - Prevent CSRF attacks
- Use HTTPS - Required for all callbacks
- Secure AppSecret - Never expose in frontend code
- Token Management - Store and refresh tokens properly
- UnionID Binding - Use UnionID for user identification