zoukankan      html  css  js  c++  java
  • 微信网页扫码登录的实现

    文档1:

    为了让用户登录网站的门槛更低,微信扫一扫登录变得越来越广泛,所以最近加紧赶制的项目中有用到这个功能,此篇文字的出发点基于微信开放平台已经配置好域名(80端口)并且认证成功获得app_id和secret并有权限调用微信的接口。好了,就先谈一谈微信扫码登录的整个流程吧。

      第一步,我们必须得把二维码放在页面上显示。首先普及一下二维码是有失效时间以及失效状态的,一旦你扫过一次二维码或者在某段时间内没有扫描页面上的二维码,该二维码就失效了。OK,微信官网给我们提供两种方式来显示二维码:1.后台发请求返回一个新的页面;2.前端js实例化二维码内嵌在自己的页面上,显然第一种比较适合懒的人(因为微信直接返回一个打包好的页面啊有木有,都不用各种css调样式了),不过在项目中两种都在用,所以就都说明一下。

      1.后台发请求获取微信返回的扫码页面

    $redirect_uri="http://你的微信开放平台绑定域名下处理扫码事件的方法";
    $redirect_uri=urlencode($redirect_uri);//该回调需要url编码
    $appID="你的appid";
    $scope="snsapi_login";//写死,微信暂时只支持这个值
    //准备向微信发请求
    $url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri
    ."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";
    //请求返回的结果(实际上是个html的字符串)
    $result = file_get_contents($url);
    //替换图片的src才能显示二维码
    $result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
    return $result; //返回页面

     这样子就会返回一个这样的页面,扫描后调用$redirect_uri,

      2.内嵌JS显示:

      这里就是通过js端实例化一个对象即可,首先在<head>标签内添加如下js文件,

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

      其次在html中定义一个div包含二维码,

    <div id="login_container"></div>
    

        最后在$(document).ready()内进行实例化:

    $(document).ready(function()
    {
        var obj = new WxLogin
        ({
            id:"login_container",//div的id
            appid: "你的appid",
            scope: "snsapi_login",//写死
            redirect_uri:encodeURI("你的处理扫码事件的方法") ,
            state: "",
            style: "black",//二维码黑白风格        
            href: "https://某个域名下的css文件"
        });
    });
    

      注意其中href里指向的css文件必须放在https协议下才能引用的到,不然页面上就是默认样式(显示上是一个比较大的二维码,你无法调节二维码的大小,位置,太痛苦了)。最后部分页面大概长成这样,这里的二维码大概只有140px:

     

      好了,二维码出现在页面上了,接下来我们就要大概的讲讲扫码的逻辑了,整个流程大概分为5步:

      走完这五步你就拿到扫码用户的所有信息了,之后再写上自己需要的的代码逻辑即可(如重定向或者登陆),在代码里的表现形式如下:

    //回调
    public function codeinfo()
    {
            $code = $_GET["code"];
            $appid = "你的appid";
            $secret = "你的secret";
            if (!empty($code))  //有code
            {
                //通过code获得 access_token + openid
               $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appid
                . "&secret=" . $secret . "&code=" . $code . "&grant_type=authorization_code";
                $jsonResult = file_get_contents($url);
                $resultArray = json_decode($jsonResult, true);
                $access_token = $resultArray["access_token"];
                $openid = $resultArray["openid"];
    
                //通过access_token + openid 获得用户所有信息,结果全部存储在$infoArray里,后面再写自己的代码逻辑
                $infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" . $access_token . "&openid=" . $openid;
                $infoResult = file_get_contents($infoUrl);
                $infoArray = json_decode($infoResult, true);
         } 
    }
    

      其实写完代码之后就会知道整个流程大概是怎么样的,本质上就是多个微信接口的配合调用,OK,记录Over!

    文档2:

    微信开发4——PHP实现PC扫码授权登陆获取用户信息

    首先须要申请,必须企业,个体工商户,媒体等,微信开放平台申请地址 https://open.weixin.qq.com/,要交300多的费用才能开通

    1,编写入口:微信开放平台的扫码登陆开放的接口可以自动生成PC扫码页面,你得到了官方通过审核的appid和appsecret后,先构造一个扫码网址入口(这里以"一号店"的扫码登陆页面为例子)

    https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

    访问后

    扫码后手机端效果

     

    入口代码如下:

    <?php
    //-------配置
    $AppID = 'wxbdc5610cc59c1631';
    $AppSecret = 'd4624c36333337afxxxxxxxxxxxxxx';
    $callback  =  'https://passport.yhd.com/wechat/callback.php'; //回调地址
    //微信登录 login.php
    session_start();
    //-------生成唯一随机串防CSRF攻击
    $state  = md5(uniqid(rand(),TRUE));
    $_SESSION["wx_state"]    =   $state; //存到SESSION
    $callback = urlencode($callback);
    $wxurl = "https://open.weixin.qq.com/connect/qrconnect?appid=".$AppID."&redirect_uri={$callback}&response_type=code&scope=snsapi_login&state={$state}#wechat_redirect";
    header("Location: $wxurl");
    ?>
    
    

      

    回调文件callback.php
    <?php
    //验证CSRF攻击
    if($_GET['state']!=$_SESSION["wx_state"]){
          exit("5001");
    }
    $AppID = 'wx33333333334d4';
    $AppSecret = 'd4624c363333330547af5443d';
    $url='https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$AppID.'&secret='.$AppSecret.'&code='.$_GET['code'].'&grant_type=authorization_code';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch, CURLOPT_URL, $url);
    $json =  curl_exec($ch);
    curl_close($ch);
    $arr=json_decode($json,1);
    //得到 access_token 与 openid
    print_r($arr);    
    $url='https://api.weixin.qq.com/sns/userinfo?access_token='.$arr['access_token'].'&openid='.$arr['openid'].'&lang=zh_CN';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch, CURLOPT_URL, $url);
    $json =  curl_exec($ch);
    curl_close($ch);
    $arr=json_decode($json,1);
    得到 用户资料
    print_r($arr);   
    ?>
    

      

    PC端最终效果如下:

  • 相关阅读:
    mysql 常用函数
    JSP 分页代码
    day15(Mysql学习)
    day14(编码实战-用户登录注册)
    Bootstrap第3天
    Bootstrap第2天
    Bootstrap 第一天
    day13(JSTL和自定义标签&MVC模型&javaweb三层框架)
    label 对齐
    Alert提示框之后跳转指定页面
  • 原文地址:https://www.cnblogs.com/yszr/p/10728217.html
Copyright © 2011-2022 走看看