web app 第三方登录-微博登录(一)

在最近参与的一个android项目中，使用的是web app 的形式，就是android提供容器，但是里面的内容都由H5实现。由于不是原生的app，给集成第三方登录带来一些困难。下面把集成的过程分享下~ 本篇博客分享的是微博的登录。

首先还是要看官方文档，链接如下：

http://open.weibo.com/wiki/移动客户端接入

如果之前没有成为微博开发者，看这里：

http://open.weibo.com/wiki/新手指南

在注册成为开发者，并仔细阅读文档后，可以开始进行代码的集成。需要微博的sdk：

https://github.com/sinaweibosdk/weibo_android_sdk
仔细阅读 新文档–>微博SDK 4.1文档.pdf

---

下面我主要讲web app 集成的过程。在讲之前，有些需要注意：

• 在微博 我的应用 中填写的app包名和签名必须跟运行时的包名签名一致

ps：之所以有此一说，因为在开发调试时打的debug包和发布的release包签名不一定一样，所以要比较注意。如果不一致的话，会导致无法授权

首先是前端部分的代码：

<div class="aui-btn-list-1">
	<a href="javascript:void(0);" class="weibo_reg_disable" id="weiboRegButton">微博登录</a>
</div>

$("#weiboRegButton").on('click',function () {
	window.android.doApp(8,"")
})

注意，上面这段代码中，window指的是当前窗口，关于js中的window对象，可以看：

http://www.w3school.com.cn/jsref/dom_obj_window.asp

由于window对象是全局的，省略不写也是可以的。
上面代码中的 android 和 doApp 大家可能觉得奇怪，不要着急，这里跟android端大有干系。

来看看android端的代码：
我们在layout中添加一个WebView组件：

 <WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layerType="hardware">
 </WebView>

关于WebView，可以看：

https://blog.csdn.net/carson_ho/article/details/52693322
WebView可以理解为一个浏览器驱动，利用它可以在android中加载H5
页面，并跟其中的js交互，因为整个页面已经放到WebView中解析

在activity中，注意以下的代码只是列出相关的代码段，不能直接使用：

private WebView myWebView = null;
private H5AndAndroidInterface jsMethod;
myWebView = findViewById(R.id.webView);
jsMethod = new H5AndAndroidInterface();
myWebView.addJavascriptInterface(jsMethod, "android");

 class H5AndAndroidInterface {
        @JavascriptInterface
        public void doApp(int type, String jsonString) {
            if (jsonString == null) {
                jsonString = "没有值";
            }
            Log.e("Webview_doApp()", type + "--" + jsonString);
            switch (type) {
                case 8:
                    WbLogin wbLogin = WbLogin.getInstance(WebActivity.this);
                    wbLogin.login(WebActivity.this);
                    break;
                default:
                    toast("没有制定类型函数" + jsonString);
                    break;
            }
        }

再把刚才的js片段贴一下：

$("#weiboRegButton").on('click',function () {
	window.android.doApp(8,"")
})

• 上下两段当中的android、doApp是关联的，我们在android中，利用addJavascriptInterface 这个函数，将一个名字（“android”，其实也可以用其他名字，比如"hello"，或者你喜欢的任何名字）与js想要交互的android接口类对应起来：jsMethod<–>“android”。

• 在用于交互的接口（H5AndAndroidInterface）类中，我们需要指明哪些接口是可以开放交互的，在这些接口上添加 @JavascriptInterface这个注解

• 因为我们做了这样的关联（addJavascriptInterface ），当webview加载js时，遇到android这个属性就会映射到android中的具体类，只要js中的方法名和调用参数写对（doApp(8,"")），就会调用到 @JavascriptInterface 注解过的接口。

到这里还没有涉及到微博登录的具体内容，请看下一篇文章：
web app 第三方登录-微博登录(二)