WeChat Website Login with Barcode
This article will show you how to integrate WeChat login with your website.
1. Register develop account
Register an account at https://open.weixin.qq.com and apply for verification, it takes several days.
2. Create Website Application
You need upload one stamped scanned file named WeChat Open Platform Website Information Registration Form and wait for verification. It also takes several days.
3. About Official Account
You can bind test account
Click View AppID to manage your test sandbox account. URL and Token can be set here and a real remote server is required here. Otherwise, you will always get a popup error toast.
Create a PHP file and upload it to your server, and click the Submit button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php define('TOKEN','mytoken'); function checksignature(){ $signature=isset($_GET['signature']) ? $_GET['signature'] : ''; $timestamp=isset($_GET['timestamp']) ? $_GET['timestamp'] : time(); $nonce=isset($_GET['nonce']) ? $_GET['nonce'] : ''; $dataArray=array($nonce,$timestamp,TOKEN); sort($dataArray); $str=implode($dataArray); $str=sha1($str); if($str==$signature){ return true; }else{ return false; } } if(checksignature()){ //return echostr $echostr=$_GET['echostr']; if($echostr){ echo $echostr; exit; } } ?> |
Or if you are using Java Sprint, you can create one similar controller to verify this step.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@Controller @RequestMapping("/sns/wechat") public class GetWechatSginController { private static Logger logger = LoggerFactory.getLogger(GetWxSginController.class); @ResponseBody @RequestMapping(value = "/verify", method = RequestMethod.GET, produces = { "application/json;charset=utf-8" }) @ApiOperation(value = "Wechat interface config", notes = "Wechat interface config", httpMethod = "GET") public String getWxUserInfo(HttpServletRequest request, @ApiParam(value = "signature from wechat") @RequestParam(required = true) String signature, @ApiParam(value = "timestamp from wechat") @RequestParam(required = true) String timestamp, @ApiParam(value = "nonce from wechat") @RequestParam(required = true) String nonce, @ApiParam(value = "echostr from wechat") @RequestParam(required = true) String echostr ) { if (SignUtil.checkSignature(signature, timestamp, nonce)) { return echostr; System.out.println("verify successfully: "+echostr); }else { return echostr; System.out.println("verify failed: "+echostr); } } } |
4. WeChat Login
All development document can be found here: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=a516a30098eee10b25df47db3fde992541e1d3ad&lang=en_US
4-1. Step 1: Request CODE
Parameter descriptions are explained in document clearly, I just add extra information.
| Parameters | Required? | Description |
|---|---|---|
| appid | Yes | |
| redirect_uri | Yes | Please urlEncode use to adjust the link, like this :http%3A%2F%2Fwww.mydomain.com%2Fcallback%2Fwechat |
| response_type | Yes | code |
| scope | Yes | snsapi_login |
| state | No | You can use one 32 chars UUID here |
Then your request code link will be like this:
1 |
https://open.weixin.qq.com/connect/qrconnect?appid=your_app_id&redirect_uri=http%3A%2F%2Fwww.mydomain.com%2Fcallback%2Fwechat&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415a#wechat_redirect |
Test the link in browser and you may get such error.
Please set the domain name of your callback page here:
Fill the domain name without http:// or tail slash, just the domain name.
Reference:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
![[汇总]AI经验](http://www.mobabel.net/wp-content/themes/hueman/assets/front/img/thumb-small-empty.png)
