怎样使用 10 行代码实现微信登录功能

六金本金
5,371 阅读4分钟

作为一名工程师,我们最大的愿景就是帮助其他工程师提高工作效率。在我们做产品的过程中就会想?怎样让其他的程序员写起程序来比较”酷”。酷的含义在于,语法飞铲简洁,同时又有一些比较先进的技术元素在里面。我们下面就来通过我们做的一些东西来说一说。

第一个问题:怎样使用一种比较简单而且优雅的事情来实现身份认证功能

你要注意上面问题的重点:简单而且优雅,身份认证。无论对于2B或者是2C的企业,身份认证都是必不可少的一个环节。有资本的企业会买一些身份认证服务器来单独作为什么认证中心。当然成本比较高,而且使用使用起来还是要经过开发人员编写很多业务逻辑代码才能实现。简单而且优雅这是当前社会发展的趋势。从手机行业追逐性能到追逐设计,从JQuery到Vue。简单和优雅无不贯穿其中。

我们是怎么做的? 先看代码吧!

用户登录:以微信登录为例子。

var config = {
    authDomain: ".wilddog.com"
};
wilddog.initializeApp(config, "DEFAULT");

由于服务是以App的形式提供的,所以我们在最开始的时候初始化的App。authDomain在中文翻译过来是:认证域,我们为每一个App单独提供了一个认证的域。4行代码搞定初始化

在当前OAuth盛行的时代,使用社交账户登录的确是非常方便的。这点我比较佩服google,一个google账号差不多可以登录外国的绝大部分的App。在中国,QQ登录,微信登录,新浪微博登录,有的时候的确需要一点记忆成本,当然,这点不是我们放弃的理由。关于OAuth的相关知识请方位: OAuth

在进行微信登录功能之前,我们可能需要做的一些配置工作,毕竟是微信家的服务。

  • 在微信开放平台管理中心,获取应用的AppID和AppSecret。
  • 在微信开放平台-网站应用-网站信息中填写回调域名auth.wilddog.com
  • 在 野狗 的控制面板-登录方式中打开微信登录方式,配置微信账号AppID和AppSecret。

实现功能:
第一种方式使用popup的方式打开微信登录的二维码,在点击微信登录之后会打开一个新的tab页面来登录。

//使用popup的方式打开微信登陆页。
var provider = new wilddog.auth.WeixinAuthProvider();
wilddog.auth().signInWithPopup(provider).then(function (user) {
    console.log(user);
}).catch(function (error) {
    // 错误处理
    console.log(error);
    // ...
});

第二种方式就是在当前的tab页面中重定向到微信登录页面。

var provider = new wilddog.auth.WeixinAuthProvider();
wilddog.auth().signInWithRedirect(provider).then(function (user) {
    console.log(user);
}).catch(function (error) {
    // 错误处理
    console.log(error);
    // ...
});

第一种方式和第二种方式其实除了一个方法名为signInWithPopup另外一个是signInWithRedirect不一样之外,其他的都一样。provider是野狗经过高度封装的登录信息供应商信息。复杂的事情我们来做,让实现变的更简单。

总结

我写到这里大概数了一下:我们一共使用了10行代码(注释不算)实现了一个微信登录功能,这在以前是不可想象的,关于这10行代码我们可以看一下,里面有一些Promise的东西,我们想相对于传统写异步回调方法
Promise相对先进一些,在ES6这个大趋势下,我们感觉这个是比较先进的点。所以我们用到我们自己的产品当中,希望你们能够喜欢。关于Promise,你可以看一下google大神写的介绍: JavaScript Promises: an Introduction,需要科学上网才可以看到。

当然,上面只是微信登录,关于QQ和微博登录,以及微信公众号内的登录,实现起来页都不会超过10行代码。希望你们各位工程师能够喜欢。

如果你想看一下怎样使用10行代码来实现QQ,微信,微博登录的话:你可以在这个网址里面看到更多: 传送门。

avatar
文章
阅读
粉丝