第三方（APP或网页）调用微信登录接口，做微信登录

时间：2024-02-23 15:29:27

微信接口调用，真的是难者不会，会者不难只要做过一遍之后以后再做就很简单了，当初我一个人因为么有人请教，在这一块耽误了好几天的时间，网上的教程也都搜过，可能因为没接触过吧，看的也不是很明白，今天来做一个比较详细的教程出来，加深一下自己的印象，也希望能帮助一些新手

微信开放平台官方文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

第一步:就是准备工作，要在微信开放平台获取网站的APPID和AppSecret。

 

然后在前端页面写一个登录按钮

 

 

 

第一种：直接调起微信登录

1、点击登录按钮

访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的AppID&redirect_uri=重定向的网址&response_type=code&scope=snsapi_userinfo&state=state#wechat_redirect获取code。

这个链接会返回两个参数（code和state）到redirect_uri

2、通过的code和AppID、AppSecret获取access_token

public function getpson(){
$data = I(\'get.\');
$code = $data[\'code\'];
if(empty($code)){
echo json_encode(\'code值不能为空！\');exit;
}
$appid = C(\'h5_appid\');
$secret = C(\'h5_secret\');
$url = \'https://api.weixin.qq.com/sns/oauth2/access_token?appid=\'.$appid.\'&secret=\'.$secret.\'&code=\'.$code.\'&grant_type=authorization_code\';（

https://api.weixin.qq.com/sns/oauth2/access_token?appid=你的AppID&secret=你的Appsecret&code=code&grant_type=authorization_code）

$one = httpGet($url);
$one = json_decode($one,true);
}

正确返回

 

 

 

 

 

 3、通过access_token和openid获取用户的信息(这里说一下openid和unionid的区别，openid是微信开放平台中每一个网站或者APP独有的，而unionid是整个微信开放平台共享的，所以说如果是多个网站或网站和APP共用用户信息的话，可以用unionid来储存用户信息)

 

public function getinfo(){
$data = I(\'post.\');
$openid = $data[\'openid\'];
$access_token=$data[\'access_token\'];
$url=\'https://api.weixin.qq.com/sns/userinfo?access_token=\'.$access_token.\'&openid=\'.$openid.\'&lang=zh_CN\';
$file_contents = httpGet($url);
$file_contents = json_decode($file_contents,true);
echo json_encode($file_contents);exit;
}

 

https://api.weixin.qq.com/sns/userinfo?access_token=access_token.&openid=openid&lang=zh_CN

返回的是json类型

 

 

 到这里基本上已经完了，之后就是对用户信息的操作了。

第二种：扫码登录

扫码登陆和直接调用微信进行登录的区别只在第一步获取code的方式不同

直接调用微信登录是访问链接，扫码登录是通过将微信登录二维码嵌入到网站页面中，同样会返回code。

1、首先引入微信官方提供的js文件

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

然后就是二维码的样式

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<div id="ss"><div id="wxCode"></div></div>


<script>
$(document).ready(function(){
　　　　　　var obj = new WxLogin({
　　　　　　　　id:"wxCode",　　//div的id
　　　　　　　　appid: "后台申请的appid",　　
　　　　　　　　scope: "snsapi_login",　　//写死
　　　　　　　　redirect_uri:encodeURI("https://www.baidu.com") ,　　//扫描二维码后跳转的页面
　　　　　　　　state: "state",
　　　　　　　　style: "black",//二维码黑白风格
　　　　　　　　href: ""
　　　　　　});
　　　　});
</script>

扫过二维码之后同样会返回两个参数（code和state）到redirect_uri。

后面的步骤就和上面直接调用微信登录的步骤一样了

 

相关文章