authentication - Wechat login for mobile website -

-

wechat has convenient qr-code login option (sorry, chinese only) desktop websites. scan code wechat, click ok, , you're logged in.

however, i'm struggling how implement same functionality when same website accessed via mobile?

i'm in same situation , keep getting unanswered issue google i'll try give more information based on have far. first let's clarify talking wechat in scope of china country. wechat in china has far more features compared other countries.

basically there 3 ways login wechat on website :

  • wechat login qr code. more designed desktop site , easiest way login wechat users point of view
  • wechat login mobile site via wechat mobile application. when user using mobile wechat application, click on link within mobile wechat app redirects user mobile version of site still in scope of wechat app. see on gmail mobile application , click on link, still in mobile app browsing mobile website.
  • wechat login mobile site via web browser. in case user going mobile site , can login on site using wechat oauth 2.0 login. similar facebook login or google login when on third party site.

now let's go technical.

qr code login

documentation available in english @ qr code login documentation i'm not gonna explain here it's not question.

wechat login using oauth 2.0 mobile site only

[edit] appears cannot use oauth wechat on website directly. can done if site loaded within wechat mobile application. please refer section below : "wechat login via wechat mobile application"

documentation qq.com using google transalate should give basics. there 3 main steps : - step 1: user consent, access code - step 2: code page in exchange authorization access_token - step 3: pulling user information

this assuming have correctly setup api access need appid, scope, , state

wechat login via wechat mobile application wechat mobile site through mobile app

in order achieve such type of login, have remember website needs loaded within wechat mobile application.

the easiest way find generating qr code based on website url , scan qr code using wechat app (there option scan withing mobile app). generate qr code, can use online tools 1 http://www.qr-code-generator.com

once browse mobile site wechat application, process when user goes login page of site, redirect user wechat oauth url.

the documentation available @ https://mp.weixin.qq.com/wiki?id=mp1421140842&highline=scope , url : 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 "nsapi_base" or "nsapi_userinfo". "nsapi_userinfo" allow bit more information user, wechat don't share much. not share email or mobile number.

state random string generate allows match post autorisation when page redirected.

appid application api wechat account. if don't have appid yet, there 2 options available. create business account (production account) or create sandbox account. can register @ https://mp.weixin.qq.com; or test sandbox account: http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login (only chinese version available)

so happen that, when user redirect https://open.weixin.qq.com/connect/oauth2/authorize have agree share information mobile site. once agree, user redirected url of choise. (see redirect_uri=redirect_uri parameter)

and can call https://api.weixin.qq.com/sns/userinfo?access_token=access_token&openid=openid&lang=zh_cn user information.

access_token token generated using appid , secret, , calling api : https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=[appid]&secret=[secret] again, appid , secret available after register wechat account explained above.

and because love english, looks there wiki in english available @ http://admin.wechat.com/wiki/index.php it's not great , complete chinese version, start better understand things.

after user information have implement logic on mobile site like:

  • auto login user if have account on site
  • display sign-up form prepopulated user info got , prompt user information need website.

hopefully lost wechat developers trying implement same. i'm more happy others complete answer.

thank you.


Comments

Post a Comment

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that? ...
Read more

routes - Laravel 4 Wildcard Routing to Different Controllers -

-
realizing i'm going take beating this, have several questions "best practices" when constructing laravel route. do laravel routes run "first come first serve" top bottom? if route found, pass control controller (or perform action) , terminate? i have part of application acts url shortner. so, route looks this: route::get('/{id}', array('as' => 'home.text', 'uses' => 'homecontroller@text'), function($id){ //make sure id exists before pushing controller. if (storage::where('shortcode','=', $id)->count() > 0) { // route found } }); how can improved? one, i'm not sure how pass processing on controller conditionally.. sort of controller::make() ..? 3) there better way in laravel check if record exists versus doing mode::where('column','=','value')->count() 4) have legacy urls http://url.com/?...
Read more

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -

-
i transforming xhtml xhtml, need xslt stylesheet part of resulting document (the stylesheet contained in <script type"text/template"> element. using the xsl:namespace-alias instruction, works fine in ie, fails in both chrome , firefox. here relevant code: <xsl:output doctype-system="about:legacy-compat" omit-xml-declaration="yes" indent="yes" method="html" media-type="application/xhml" encoding="utf-8"/> <xsl:namespace-alias stylesheet-prefix="wxsl" result-prefix="xsl" /> <xsl:template match="head"> <!-- code omitted clarity --> <script type="text/template"> <wxsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:eli="local"> ...
Read more