微信会员注册开发【带源码】：网页授权,得到code后在当前页面获取openid,js+php实现跨域请求

开发情景：

 

作者主页：天际app工作室 http://home.zhubajie.com/7145093/

需要引导微信公众平台用户点击链接进入注册页面，在注册页面需要获取用户微信的openid。技术核心是需要借助网页授权，并且在得到授权code时通过js立刻获取openid。

网上关于网页授权后一步步获取openid的文章大多是理论步骤的解说，落实到代码上具体怎么尽可能快的拿到openid的内容很少。笔者十分愤怒，决定写下代码和大家分享

 

这个过程需要一个前端页面代码和一个后端辅助程序，我这里前端是html+js，后端是php。

直接上代码，代码里注释解释的比较清楚：

前端：index.html

 

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>  
  2. <!-- 天际app工作室 http://home.zhubajie.com/7145093/ -->  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">  
  7. <meta name="apple-mobile-web-app-capable" content="yes">  
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  9. <meta name="format-detection" content="telephone=no">  
  10.   
  11. <title>会员注册</title>  
  12. <script type="text/javascript" src="jquery.js"></script>  
  13. <script type="text/javascript">  
  14.   
  15.  function callback(result) {    
  16.         alert('cucess');    
  17.         alert(result);  //输出openid  
  18.     }    
  19.       
  20. function getQueryString(name) {  
  21.     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
  22.     var r = window.location.search.substr(1).match(reg);  
  23.     if (r != null) return unescape(r[2]); return null;  
  24.     }  
  25.   
  26.   
  27. var code = getQueryString("code");  
  28.   
  29. $.ajax({   
  30.       async: false,   
  31.       url: "http://arvon2012.sinaapp.com/oauth2.php", //这是我的服务端处理文件php的  
  32.       type: "GET",   
  33.       //下面几行是jsoup，如果去掉下面几行的注释，后端对应的返回结果也要去掉注释  
  34.       // dataType: 'jsonp',   
  35.       // jsonp: 'callback', //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象.   
  36.       // jsonpCallback:'callback',  
  37.       data: {code:code}, //传递本页面获取的code到后台，以便后台获取openid  
  38.       timeout: 5000,   
  39.       success: function (result) {   
  40.         callback(result);  
  41.       },   
  42.       error: function (jqXHR, textStatus, errorThrown) {   
  43.           alert(textStatus);   
  44.       }   
  45.   });  
  46.   
  47.   
  48. </script>  
  49. </head>  
  50. <body>  
  51. </body>  

 

 

下面是服务端对应的代码，oauth2.php

 

[php]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
    1. <?php  
    2. //天际app工作室 http://home.zhubajie.com/7145093/  
    3. $code = $_GET['code'];//前端传来的code值  
    4.   
    5. $appid = "xxxxxxxxxxxxxxxx";  
    6. $appsecret = "xxxxxxxxxxxxxxxxxxxxxx";  
    7.   
    8. //获取openid  
    9. $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";  
    10.   
    11. $result = https_request($url);  
    12.   
    13. $jsoninfo = json_decode($result, true);  
    14. $openid = $jsoninfo["openid"];//从返回json结果中读出openid  
    15.   
    16. $callback=$_GET['callback'];    
    17. // echo $callback."({result:'".$openid."'})";   
    18. echo $openid; //把openid 送回前端  
    19.   
    20. function https_request($url,$data = null){  
    21.     $curl = curl_init();  
    22.     curl_setopt($curl, CURLOPT_URL, $url);  
    23.     curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);  
    24.     curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);  
    25.     if (!empty($data)){  
    26.         curl_setopt($curl, CURLOPT_POST, 1);  
    27.         curl_setopt($curl, CURLOPT_POSTFIELDS, $data);  
    28.     }  
    29.     curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);  
    30.     $output = curl_exec($curl);  
    31.     curl_close($curl);  
    32.     return $output;  
    33. }  
    34.   
    35. ?>  

转自：http://www.cnblogs.com/arvon2012/p/3663840
2019-03-02 01:08

知识点

  • 微信公众号

    • 相关教程

    更多

    微信-网页授权获取用户openid 

    第一步：用户同意授权，获取code 在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认带有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面： https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=RE

    微信OAuth授权获取用户OpenId-JAVA(个人经验) 

    http://mp.weixin.qq.com/wiki这个是官网的接口文档 微信授权获取用户openid-JAVA   第一步：用户同意授权，获取code  在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认带有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面： https://open.weixin.q

    微信公众平台开发文档 网页授权获取用户基本信息 

    网页授权获取用户基本信息      如果用户在微信中（Web微信除外）访问公众号的第三方网页，公众号开发者可以通过此接口获取当前用户基本信息（包括昵称、性别、城市、国家）。利用用户信息，可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。请注意，“获取用户基本信息接口是在用户和公众号产生消息交互时，才能根据用户OpenID获取用户基本信息，而网页授权的方式获取用户基本信息，则无需消息交互

    微信公众平台开发 网页授权获取用户基本信息 

    网页授权获取用户基本信息      如果用户在微信中（Web微信除外）访问公众号的第三方网页，公众号开发者可以通过此接口获取当前用户基本信息（包括昵称、性别、城市、国家）。利用用户信息，可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。请注意，“获取用户基本信息接口是在用户和公众号产生消息交互时，才能根据用户OpenID获取用户基本信息，而网页授权的方式获取用户基本信息，则无需消息交互

    微信公众平台开发教程第5篇-----网页授权获取用户基本信息 

    欢迎加入群：347245650 345531810进行讨论相互交流 我的微信号：572838485 我的微信公众账号 我的微社区欢迎关注 图床：没有服务器 拖拽图片 外网即可访问 http://2.crazyflower.duapp.com/home 网页授权获取用户基本信息此接口是通过OAuth2.0来完成网页授权的，是安全可靠的。 　　一、什么是OAuth2.0  　　　　OAuth是一个开放

    微信公共服务平台开发（.Net 的实现）13-------网页授权（下 ：C#代码的实现 ） 

    接着上次的理论,我们这次来研究用代码实现“网页授权获取用户基本信息”，首先我们需要一个链接指向微信的授权页面，在微信开发平台中已经说了，这个链接必须在微信客户端中打开，那么我们就干脆使用文本消息来完成吧，也就是说当我们发送“授权”两个字的时候，微信给我们一个链接，我们点击这个链接然后进入“授权页面”。首先改造一下我们OnLoad函数： if (wx.MsgType == "text&qu

    微信公众平台开发(99) 自定义菜单获取OpenID 

    关键字 微信公众平台 自定义菜单 OpenID 作者：方倍工作室 原文：http://www.cnblogs.com/txw1958/p/weixin-menu-get-openid.html 在这篇微信公众平台开发教程中，我们将介绍如何在自定义菜单中获得用户的OpenID。  本篇开发教程的实质是微信自定义菜单及OAuth2.0授权的灵活运用。 本文分为以下两个部分：   拥有高级接口权限时的获

    微信开发——通过授权获取用户的基本信息 

    这年头，招个人不容易，现在大小活都得干了， 现在干起了微信开发这活儿，顺带写点经验。 上一回，写了篇文章是封装微信接口消息的处理的，具体可以看：实现虽易，写好不易——小玩意也能体现编码功力，微信消息处理框架发布 现在来谈谈如何获取通过微信提供的接口来获取微信用户所写的基本信息，包括国家，省，市，昵称。当然，要获取用户的信息，是要经过用户授权。关于这部份的文档，点击这里可以看到。 我要说的是具体的操

    微信公共服务平台开发（.Net 的实现）13-------网页授权（下 ：C#代码的实现 ） 

    接着上次的理论,我们这次来研究用代码实现“网页授权获取用户基本信息”，首先我们需要一个链接指向微信的授权页面，在微信开发平台中已经说了，这个链接必须在微信客户端中打开，那么我们就干脆使用文本消息来完成吧，也就是说当我们发送“授权”两个字的时候，微信给我们一个链接，我们点击这个链接然后进入“授权页面”。首先改造一下我们OnLoad函数：          [csharp]     view plai

    微信公众平台开发（71）OAuth2.0网页授权 

    微信公众平台开发 OAuth2.0网页授权认证 微信公众平台最近新推出微信认证，认证后可以获得高级接口权限，其中一个是OAuth2.0网页授权，很多朋友在使用这个的时候失败了或者无法理解其内容，希望我出个教程详细讲解一下，于是便有了这篇文章。 一、什么是OAuth2.0 官方网站：http://oauth.net/ http://oauth.net/2/ 权威定义：OAuth is An open

    微信公众平台开发（71）OAuth2.0网页授权 

    微信公众平台开发OAuth2.0网页授权认证 作者：方倍工作室 微信公众平台最近新推出微信认证，认证后可以获得高级接口权限，其中一个是OAuth2.0网页授权，很多朋友在使用这个的时候失败了或者无法理解其内容，希望我出个教程详细讲解一下，于是便有了这篇文章。 一、什么是OAuth2.0 官方网站：http://oauth.net/ http://oauth.net/2/ 权威定义：OAuth is

    微信获取用户的openid和详细信息 

    获取用户的信息的原理，首先用户会点击一个url，这个url会包含一个参数redirect_uri，这个url是指向微信那边的服务器的，然后微信会把这个http请求重定向到redirect_uri，即我们的后端，而且会附带一个code参数，如果我们需要获取用户的基础信息（也就是openid）就需要用这个code去访问微信的指定url来请求用户的openid，如果我们需要获取用户的详细信息（微信名称，

    paip.微信菜单直接跳转url和获取openid流程总结 

    paip.微信菜单直接跳转url和获取openid流程总结   #------不能直接跳转,贝儿提示不安全的链接..   #-------使用auth跳转.   //todox 直接转到。。 direct goto   ViewButton skrechCard = new ViewButton("刮刮卡o428,view," +   "https://open.we

    微信公众平台开发 OAuth2.0网页授权认证 

    转至：http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html 微信公众平台最近新推出微信认证，认证后可以获得高级接口权限，其中一个是OAuth2.0网页授权，很多朋友在使用这个的时候失败了或者无法理解其内容，希望我出个教程详细讲解一下，于是便有了这篇文章。 一、什么是OAuth2.0 官方网站：http://oauth.net/ http://

    Force.com微信开发系列（七）OAuth2.0网页授权 

    OAuth是一个开放协议，允许用户让第三方应用以安全且标准的方式获取该用户在某一网站上存储的私密资源（如用户个人信息、照片、视频、联系人列表），而无须将用户名和密码提供给第三方应用。本文将详细介绍OAuth协议以及在微信里的具体实现。 OAuth2.0协议介绍 OAuth2.0是OAuth协议的下一版本，但不向后兼容OAuth 1.0。 OAuth 2.0关注客户端开发者的简易性，同时为Web应用

    最新教程

    更多

    java线程状态详解(6种) 

    java线程类为：java.lang.Thread，其实现java.lang.Runnable接口。 线程在运行过程中有6种状态，分别如下： NEW：初始状态，线程被构建，但是还没有调用start()方法 RUNNABLE：运行状态，Java线程将操作系统中的就绪和运行两种状态统称为“运行状态” BLOCK：阻塞状态，表示线程阻塞

    redis从库只读设置-redis集群管理 

    默认情况下redis数据库充当slave角色时是只读的不能进行写操作，如果写入，会提示以下错误：READONLY You can't write against a read only slave.  127.0.0.1:6382> set k3 111  (error) READONLY You can't write against a read only slave. 如果你要开启从库

    Netty环境配置 

    netty是一个java事件驱动的网络通信框架，也就是一个jar包，只要在项目里引用即可。

    Netty基于流的传输处理 

    ​在TCP/IP的基于流的传输中，接收的数据被存储到套接字接收缓冲器中。不幸的是，基于流的传输的缓冲器不是分组的队列，而是字节的队列。 这意味着，即使将两个消息作为两个独立的数据包发送，操作系统也不会将它们视为两个消息，而只是一组字节(有点悲剧)。 因此，不能保证读的是您在远程定入的行数据

    Netty入门实例-使用POJO代替ByteBuf 

    使用TIME协议的客户端和服务器示例，让它们使用POJO来代替原来的ByteBuf。

    Netty入门实例-时间服务器 

    Netty中服务器和客户端之间最大的和唯一的区别是使用了不同的Bootstrap和Channel实现

    Netty入门实例-编写服务器端程序 

    channelRead()处理程序方法实现如下

    Netty开发环境配置 

    最新版本的Netty 4.x和JDK 1.6及更高版本

    电商平台数据库设计 

    电商平台数据库表设计：商品分类表、商品信息表、品牌表、商品属性表、商品属性扩展表、规格表、规格扩展表

    HttpClient 上传文件 

    我们使用MultipartEntityBuilder创建一个HttpEntity。 当创建构建器时，添加一个二进制体 - 包含将要上传的文件以及一个文本正文。 接下来，使用RequestBuilder创建一个HTTP请求，并分配先前创建的HttpEntity。

    MongoDB常用命令 

    查看当前使用的数据库    > db    test  切换数据库   > use foobar    switched to db foobar  插入文档    > post={"title":"领悟书生","content":"这是一个分享教程的网站","date":new

    快速了解MongoDB【基本概念与体系结构】 

    什么是MongoDB MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era. MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

    windows系统安装MongoDB 

    安装 下载MongoDB的安装包：mongodb-win32-x86_64-2008plus-ssl-3.2.10-signed.msi，按照提示步骤安装即可。 安装完成后，软件会安装在C:\Program Files\MongoDB 目录中 我们要启动的服务程序就是C:\Program Files\MongoDB\Server\3.2\bin目录下的mongod.exe，为了方便我们每次启动，我

    Spring boot整合MyBatis-Plus 之二：增删改查 

    基于上一篇springboot整合MyBatis-Plus之后，实现简单的增删改查 创建实体类 添加表注解TableName和主键注解TableId import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baom

    分布式ID生成器【snowflake雪花算法】 

    基于snowflake雪花算法分布式ID生成器 snowflake雪花算法分布式ID生成器几大特点： 41bit的时间戳可以支持该算法使用到2082年 10bit的工作机器id可以支持1024台机器 序列号支持1毫秒产生4096个自增序列id 整体上按照时间自增排序 整个分布式系统内不会产生ID碰撞 每秒能够产生26万ID左右 Twitter的 Snowflake分布式ID生成器的JAVA实现方案

    Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！