strapi-wechat-h5-auth v0.0.5
WeChat H5 Auth
WeChat H5 Auth helps you to easily create WeChat H5 authentication available for your user.
Features
- Official USER LOGIN REQUEST integration
- Using strapi default user-permission collection
- JWT Authentication
- Sanitized response
- Highly secure
How to use
STEP 1
Install the strapi plugin
npm i strapi-wechat-h5-auth
STEP 2
Add the folling lines of code in the file: config/plugins.js
module.exports = {
// ...
'strapi-wechat-h5-auth': {
enabled: true
},
// ...
}
After done this, you can start the application with command:
npm run develop
STEP 3
- Config the WeChat AppID,AppSecret and redirct_url.
Go to the Strapi Dashboard, and change to the PLUGINS -> WeChat H5 Authenticator, input the AppID,AppSecret,redirect_url and save it.
- Add fileds to User Collection
Go to the Strapi Dashboard, and change to the User Collection(PLUGINS -> Content-Type Builder -> COLLECTION TYPES -> User). Add two fields to this collection, and save. | NAME | TYPE | | ---- | ---- | | openid | Text | | wechatUserInfo | JSON |
STEP 4
Use the getUserInfo button in your WeChat H5 to get the current userinfo
HTML
<!-- use a tag go wx login -->
<a href="<STRAPI_BACKEND>/strapi-wechat-h5-auth/code">
<span>登录</span>
</a>
Javascript
Initialisation a request to STRAPI_BACKEND to get JWT token and Sanitized userinfo.
// code from <FRONTEND>?code=xxxx
const urlParams = getUrlParams();
if(urlParams.code){
$.ajax({
type: 'POST',
url: '<STRAPI_BACKEND>/strapi-wechat-h5-auth/login',
data: {
code: urlParams.code
},
success(response){
// when get userinfo success
}
})
}
The STRAPI_BACKEND request response look like this:
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjY3NTM3MzU5LCJleHAiOjE2NzAxMjkzNTl9.giRP146cEV0wyIh98D3KJigHShsEGofedtW5YYckzsQ",
"user": {
"id": 1,
"username": null,
"email": null,
"provider": "local",
"confirmationToken": null,
"confirmed": true,
"blocked": false,
"createdAt": "2022-11-04T02:41:27.149Z",
"updatedAt": "2022-11-04T02:41:27.149Z",
"openid": "oFHxc5TV5VKscIudqlmfx9JpK4d4",
"wechatUserInfo": {
"nickName": "wfz",
"gender": 0,
"language": "zh_CN",
"city": "",
"province": "",
"country": "",
"avatarUrl": "https://A-WECHAT-AVATAR-LINK"
}
}
}
You can using the JWT token in your application.
Report Bugs/Issues
Any bugs/issues you may face can be submitted as issues in the Github repo.
Inspired by /wfzong/strapi-wechat-miniprogram
2 years ago