Wechat login for mobile website
Wechat has a very convenient QR-code login option (sorry, Chinese only) for desktop websites. Basically you just scan the code with Wechat, click OK, and you're logged in.
However, I'm struggling about how to implement the same functionality when the same website is accessed via mobile?
Answer
I'm in the same situation and i keep getting this unanswered issue from Google so I'll try to give some more information based on what I have so far. First let's clarify that we are talking about the WeChat in the scope of the China country. Wechat in China has far more features compared to other countries.
Basically there are 3 ways to login with WeChat on your website :
- WeChat login with QR Code. This is more designed for the desktop site and is the easiest way to login wechat users from my point of view
- WeChat login to the mobile site via the WeChat Mobile Application. This is when a user is using the mobile WeChat application, then click on a link within the mobile WeChat app that redirects the user to the mobile version of the site but still in the scope of the Wechat app. Just see this like you are on the Gmail mobile application and you click on a link, you will still be in the mobile app but browsing a mobile website.
- WeChat login from the mobile site via a web browser. In this case the user is just going to a mobile site and can login on the site using the WeChat OAuth 2.0 login. This is similar to Facebook login or Google login when you are on a third party site.
Now let's go technical.
QR Code login
documentation is available in English at QR Code login documentation I'm not gonna explain this here as it's not really the question.
WeChat login using OAuth 2.0 from a mobile site only
[EDIT] It appears that we cannot use the OAuth from WeChat on a website directly. This can only be done if the site is loaded from within the WeChat mobile application. Please refer to the section below : "WeChat login via WeChat mobile application"
Documentation from qq.com Using Google Transalate should give you the basics. There are 3 main steps :
- Step 1: The user consent, access code
- Step 2: The code page in exchange for authorization access_token
- Step 3: pulling the user information
This is also assuming you have correctly setup the API access as you need the appid, scope, and state
WeChat login via WeChat mobile application from wechat to mobile site through mobile app
In order to achieve such type of login, you have to remember that the website needs to be loaded within the wechat mobile application.
The easiest way I could find to do that is by generating a QR code based on the website url and then scan the QR code using the wechat app (there is an option to scan withing the mobile app). To generate a QR code, you can use online tools like the one from http://www.qr-code-generator.com
Once you browse your mobile site from the Wechat application, the process would be that when the user goes to the login page of your site, you will redirect the user to the wechat oauth url.
The documentation for this is available at https://mp.weixin.qq.com/wiki?id=mp1421140842&highline=scope And the url will be something like : https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
SCOPE can be "nsapi_base" or "nsapi_userinfo". "nsapi_userinfo" will allow you to get a bit more information about the user, but really wechat don't share much. They will not share email or mobile number.
STATE is just a random string you generate that allows you to match it post autorisation when the page is redirected.
APPID is the application api from your wechat account. If you don't have an APPID yet, there are 2 options available. Create a business account (production account) or create a sandbox account. You can register at https://mp.weixin.qq.com; Or for a test sandbox account: http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login (only Chinese version is available)
So what will happen is that, when the user is redirect to https://open.weixin.qq.com/connect/oauth2/authorize they will have to agree to share their information with your mobile site. Once they agree, the user will be redirected to the url of your choise. (see redirect_uri=REDIRECT_URI parameter)
and then you can call https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN to get the user information.
ACCESS_TOKEN is a token generated using the APPID and SECRET, and calling the api : https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=[APPID]&secret=[SECRET] Again, the APPID and SECRET are available after you register to the wechat account as explained above.
And because we love english, it looks like there is a wiki in english available at http://admin.wechat.com/wiki/index.php It's not as great and as complete as the chinese version, but it is a start to better understand things.
After you get the user information you just have to implement the logic on your mobile site to something like:
- auto login the user if they already have an account on the site
- display the sign-up form with prepopulated user info you got and prompt the user for the extra information you need for your website.