6

微信为桌面网站提供了一个非常方便的二维码登录选项(抱歉,仅限中文)。基本上你只要用微信扫码,点击确定,就可以登录了。

但是,当通过移动设备访问同一个网站时,我正在为如何实现相同的功能而苦苦挣扎?

4

2 回答 2

13

我处于同样的情况,我不断从谷歌收到这个未解决的问题,所以我会尝试根据我目前所掌握的信息提供更多信息。首先让我们澄清一下,我们说的是中国国家范围内的微信。与其他国家相比,中国的微信具有更多的功能。

基本上有3种方法可以在您的网站上使用微信登录:

  • 使用二维码登录微信。这更多是为桌面站点设计的,从我的角度来看,这是登录微信用户的最简单方法
  • 微信通过微信移动应用程序登录移动网站。这是当用户使用移动微信应用程序时,然后点击移动微信应用程序内的链接,将用户重定向到网站的移动版本,但仍在微信应用程序的范围内。就像您在 Gmail 移动应用程序上一样查看此内容,然后单击链接,您仍将在移动应用程序中,但正在浏览移动网站。
  • 通过网络浏览器从移动网站登录微信。在这种情况下,用户只是去一个移动站点,并且可以使用微信 OAuth 2.0 登录来登录该站点。当您在第三方网站上时,这类似于 Facebook 登录或 Google 登录。

现在让我们来看看技术。

二维码登录

文档在QR 码登录文档中提供英文版 我不会在这里解释,因为这不是真正的问题。

仅从移动站点使用 OAuth 2.0 登录微信

[编辑]看来我们不能直接在网站上使用来自微信的 OAuth。这只能在网站从微信移动应用程序中加载时才能完成。请参考以下部分:“通过微信移动应用程序登录微信”

来自 qq.com 的文档使用 Google Transalate 应该为您提供基础知识。有3个主要步骤:

  • 第一步:用户同意,访问码
  • 第二步:代码页换取授权access_token
  • 第三步:拉取用户信息

这还假设您已正确设置 API 访问权限,因为您需要 appid、范围和状态

通过微信移动应用程序通过微信登录通过移动应用程序从微信到移动站点

为了实现这种类型的登录,您必须记住该网站需要在微信移动应用程序中加载。

我能找到的最简单的方法是根据网站 url 生成一个二维码,然后使用微信应用程序扫描二维码(有一个使用移动应用程序扫描的选项)。要生成二维码,您可以使用http://www.qr-code-generator.com中的在线工具

一旦您从微信应用程序浏览您的移动网站,过程将是当用户进入您网站的登录页面时,您会将用户重定向到微信oauth url。

相关文档可在https://mp.weixin.qq.com/wiki?id=mp1421140842&highline=scope获得, 网址类似于:https ://open.weixin.qq.com/connect/oauth2/授权?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

范围可以是“nsapi_base”或“nsapi_userinfo”。"nsapi_userinfo" 可以让你获得更多关于用户的信息,但实际上微信分享的并不多。他们不会共享电子邮件或手机号码。

STATE 只是您生成的一个随机字符串,它允许您在页面被重定向时匹配它发布自动。

APPID 是您微信帐号中的应用程序接口。如果您还没有 APPID,则有 2 个选项可用。创建企业账户(生产账户)或创建沙盒账户。您可以在https://mp.weixin.qq.com注册;或者测试沙盒账号: http ://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login (只有中文版)

所以会发生的是,当用户被重定向到https://open.weixin.qq.com/connect/oauth2/authorize时,他们将不得不同意与您的移动站点共享他们的信息。一旦他们同意,用户将被重定向到您选择的网址。(见 redirect_uri=REDIRECT_URI 参数)

然后可以调用 https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN 获取用户信息。

ACCESS_TOKEN 是使用 APPID 和 SECRET 生成的令牌,并调用 api :https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=[APPID]&secret=[SECRET] 再次,APPID如上所述,在您注册到微信帐户后,即可使用和 SECRET。

而且因为我们喜欢英语,所以在http://admin.wechat.com/wiki/index.php 上好像有一个英文 wiki更好地理解事物。

获得用户信息后,您只需在移动网站上实现如下逻辑:

  • 如果用户已经在网站上拥有帐户,则自动登录用户
  • 显示带有您获得的预填充用户信息的注册表单,并提示用户输入您的网站所需的额外信息。
于 2017-05-19T03:09:12.890 回答
-3

当您切换到微信二维码时,微信会生成一个验证二维码并链接到一个长拉服务器,您的手机扫描二维码后,点击链接,将触发长拉服务器的验证流程,并使您的浏览器验证并重定向。

我在github上复现微信流程,欢迎投稿。

https://github.com/clonn/QRLoing_reproduce

于 2016-09-03T18:39:09.073 回答