翻看谷歌源码 那些让人感兴趣的东西--WebView如何申请授权

转载请注明出处：王亟亟的大牛之路

强行安利下自己的收纳库（日更）：https://github.com/ddwhan0123/Useful-Open-Source-Android

昨天写了个CardView的貌似，不太受欢迎，今天上午没啥大事就继续翻源码，这一篇讲的是WebView的授权实现（WebView这个坑大家怨声载道，现在看看官方是如何操作的吧）

先看下运行效果

OK,来看看包结构

比平时的那些sample东西稍微多点 其实主要业务就在 PermissionRequestFragment和ConfirmationDialogFragment里

我们一个个看（主要看授权行为）

MainActivity初始化一些UI 然后把 Log部分和WebView部分以及bar逻辑的一些相关内容做了处理，不涉及授权操作（主要做呈现）

他继承于SampleActivityBase，也是做一些初始化Log的行为，这里不做解释

接下来是授权行为操作的PermissionRequestFragment（重要步骤已经注释）

/** * This fragment shows a {@link WebView} and loads a web app from the {@link SimpleWebServer}. */
public class PermissionRequestFragment extends Fragment implements ConfirmationDialogFragment.Listener {

    private static final String TAG = PermissionRequestFragment.class.getSimpleName();

    private static final String FRAGMENT_DIALOG = "dialog";

    /** * We use this web server to serve HTML files in the assets folder. This is because we cannot * use the JavaScript method "getUserMedia" from "file:///android_assets/..." URLs. * 异步对WebView的操作 */
    private SimpleWebServer mWebServer;

    /** * A reference to the {@link WebView}. * 嵌入的ViewView */
    private WebView mWebView;

    /** * This field stores the {@link PermissionRequest} from the web application until it is allowed * or denied by user. * 授权行为 */
    private PermissionRequest mPermissionRequest;

    /** * For testing. * 控制台行为 */
    private ConsoleMonitor mConsoleMonitor;

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        //布局处理
        return inflater.inflate(R.layout.fragment_permission_request, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        //初始化WebView相关操作
        mWebView = (WebView) view.findViewById(R.id.web_view);
        // Here, we use #mWebChromeClient with implementation for handling PermissionRequests.
        mWebView.setWebChromeClient(mWebChromeClient);
        configureWebSettings(mWebView.getSettings());
    }

    @Override
    public void onResume() {
        super.onResume();
        //模拟访问某URLWebView
        final int port = 8080;
        mWebServer = new SimpleWebServer(port, getResources().getAssets());
        mWebServer.start();
        mWebView.loadUrl("http://localhost:" + port + "/sample.html");
    }

    @Override
    public void onPause() {
        //关闭
        mWebServer.stop();
        super.onPause();
    }

    //允许JS操作行为
    @SuppressLint("SetJavaScriptEnabled")
    private static void configureWebSettings(WebSettings settings) {
        settings.setJavaScriptEnabled(true);
    }

    /** * This {@link WebChromeClient} has implementation for handling {@link PermissionRequest}. * 主要的时间传递行为 */
    private WebChromeClient mWebChromeClient = new WebChromeClient() {

        // This method is called when the web content is requesting permission to access some
        // resources.
        //当网页内容被请求允许访问某些资源，调用此方法。
        @Override
        public void onPermissionRequest(PermissionRequest request) {
            Log.i(TAG, "onPermissionRequest");
            mPermissionRequest = request;
            //把事件传递给了ConfirmationDialogFragment
            ConfirmationDialogFragment.newInstance(request.getResources())
                    .show(getChildFragmentManager(), FRAGMENT_DIALOG);
        }

        // This method is called when the permission request is canceled by the web content.
        //这个方法在授权请求被取消时被调用
        @Override
        public void onPermissionRequestCanceled(PermissionRequest request) {
            Log.i(TAG, "onPermissionRequestCanceled");
            // 驳回提示UI作为请求不再有效。
            mPermissionRequest = null;
            DialogFragment fragment = (DialogFragment) getChildFragmentManager()
                    .findFragmentByTag(FRAGMENT_DIALOG);
            if (null != fragment) {
                fragment.dismiss();
            }
        }

        @Override
        public boolean onConsoleMessage(@NonNull ConsoleMessage message) {
            switch (message.messageLevel()) {
                case TIP:
                    Log.v(TAG, message.message());
                    break;
                case LOG:
                    Log.i(TAG, message.message());
                    break;
                case WARNING:
                    Log.w(TAG, message.message());
                    break;
                case ERROR:
                    Log.e(TAG, message.message());
                    break;
                case DEBUG:
                    Log.d(TAG, message.message());
                    break;
            }
            if (null != mConsoleMonitor) {
                mConsoleMonitor.onConsoleMessage(message);
            }
            return true;
        }

    };

    @Override
    public void onConfirmation(boolean allowed) {
        if (allowed) {
            mPermissionRequest.grant(mPermissionRequest.getResources());
            Log.d(TAG, "Permission granted.");
        } else {
            mPermissionRequest.deny();
            Log.d(TAG, "Permission request denied.");
        }
        mPermissionRequest = null;
    }

    public void setConsoleMonitor(ConsoleMonitor monitor) {
        mConsoleMonitor = monitor;
    }

    /** * For testing. */
    public interface ConsoleMonitor {
        public void onConsoleMessage(ConsoleMessage message);
    }

}

PermissionRequestFragment这个类做了一系列初始化的行为（主要是对于 WebView的），然后接收JS的回调，把处理的权限给予ConfirmationDialogFragment，然后根据ConfirmationDialogFragment的回调来做相关处理

再来看下ConfirmationDialogFragment

/** * Prompts the user to confirm permission request. */
public class ConfirmationDialogFragment extends DialogFragment {

    private static final String ARG_RESOURCES = "resources";

    /** * Creates a new instance of ConfirmationDialogFragment. * * @param resources The list of resources requested by PermissionRequeste. * @return A new instance. */
    public static ConfirmationDialogFragment newInstance(String[] resources) {
        ConfirmationDialogFragment fragment = new ConfirmationDialogFragment();
        Bundle args = new Bundle();
        args.putStringArray(ARG_RESOURCES, resources);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        String[] resources = getArguments().getStringArray(ARG_RESOURCES);
        return new AlertDialog.Builder(getActivity())
                .setMessage(getString(R.string.confirmation, TextUtils.join("\n", resources)))
                .setNegativeButton(R.string.deny, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        ((Listener) getParentFragment()).onConfirmation(false);
                    }
                })
                .setPositiveButton(R.string.allow, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        ((Listener) getParentFragment()).onConfirmation(true);
                    }
                })
                .create();
    }

    /** * Callback for the user's response. */
    public interface Listener {

        /** * Called when the PermissoinRequest is allowed or denied by the user. * * @param allowed True if the user allowed the request. */
        public void onConfirmation(boolean allowed);
    }

}

这边做的事情比较简单，就不在注释里讲了，这边笼统的介绍下。

首先当被调用的时候接受到了具体申请授权的内容，然后显示dialog，根据用户不同的操作传递给PermissionRequestFragment ,他本身不做什么具体授权行为，主要是dialog的显示功能。

  @Override
    public void onConfirmation(boolean allowed) {
        if (allowed) {
            mPermissionRequest.grant(mPermissionRequest.getResources());
            Log.d(TAG, "Permission granted.");
        } else {
            mPermissionRequest.deny();
            Log.d(TAG, "Permission request denied.");
        }
        mPermissionRequest = null;
    }

因为在授权之后又再次为null,所以我们也就能反复对他进行操作了。

那么问题来了，从头到尾我们是如何跟JS交互的？

再来看下JS的代码

(function () { "use strict"; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; window.URL = window.URL || window.webkitURL; window.onload = function () { var video = document.querySelector('#video'), toggle = document.querySelector('#toggle'), stream = null; if (!navigator.getUserMedia) { console.error('getUserMedia not supported'); } toggle.addEventListener('click', function () { if (null === stream) { // This call to "getUserMedia" initiates a PermissionRequest in the WebView. navigator.getUserMedia({ video: true }, function (s) { stream = s; video.src = window.URL.createObjectURL(stream); toggle.innerText = 'Stop'; console.log('Started'); }, function (error) { console.error('Error starting camera. Denied.'); }); } else { stream.stop(); stream = null; toggle.innerText = 'Start'; console.log('Stopped'); } }); console.log('Page loaded'); }; })();

整个html把事情都交付给了JS做逻辑判断 而navigator.getUserMedia 就是js向手机申请需要做某件事，手机知晓后向用户申请授权的代码了
里面还有一些读不到媒体干嘛干嘛的判断，大家爱看不看，不是太重要。

这样一来流程完全走了一遍

总结几个关键步骤：

1 WebView设置的时候要能接受JS请求

2 在需要native支持的时候通过双方的接口进行通信

3 手机接收到请求授权后问用户是否给予，如果用户不同意就 mPermissionRequest.deny()

代码那么多其实并不难理解，只是一大堆回调地狱而已！

源码地址：https://github.com/ddwhan0123/BlogSample/tree/master/PermissionRequest

源码下载地址：https://github.com/ddwhan0123/BlogSample/blob/master/PermissionRequest/PermissionRequest.zip?raw=true