App接入指引

说明

在App环境中，接入身份认证H5版本比较特殊，需要使用WebView的方式来承载H5页面。

由于身份认证H5服务涉及到部分系统权限相关的操作，如果摄像头设备权限、相机相册等存在异常，会导致无法正常进行认证，因此需要提前对WebView环境进行一些代码配置。

Android 系统

根据项目需求选择原生WebView或者其他开源WebView(比如腾讯x5)，本文以原生WebView接入为例：

申请权限，使用前需要申请权限

1. Manifest.xml中增加权限说明

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />

2. targetSdkVersion >= 23 需要动态申请权限处理。

设置WebView的WebSettings

webView.settings.apply {
    javaScriptEnabled = true
    domStorageEnabled = true
    allowFileAccess = true
    allowContentAccess = true
    loadsImagesAutomatically = true
    mediaPlaybackRequiresUserGesture = false
}

重写WebChromeClient.onPermissionRequest，处理权限授予逻辑

webView.webChromeClient = object : WebChromeClient() {
    override fun onPermissionRequest(request: PermissionRequest?) {
        request?.grant(request.resources)
    }
}

重写WebChromeClient.onShowFileChooser，处理降级逻辑

val PICK_VIDEO_REQUEST_CODE = 1001
val RECORD_VIDEO_REQUEST_CODE = 2002
var mUploadMessages: ValueCallback<Array<Uri>>? = null

webView.webChromeClient = object : WebChromeClient() {
    override fun onShowFileChooser(
        webView: WebView,
        filePathCallback: ValueCallback<Array<Uri>>?,
        fileChooserParams: FileChooserParams
    ): Boolean {
        //根据自身业务需求选择对应的处理方式。
        recordVideo(filePathCallback)
        //pickVideo(filePathCallback)
        return true
    }
}

/**
 * 调用系统页面选择动作视频
 */
private fun pickVideo(filePathCallback: ValueCallback<Array<Uri>>?) {
    mUploadMessages = filePathCallback
    val chooserIntent =
        Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
    chooserIntent.type = "video/*"
    startActivityForResult(chooserIntent, PICK_VIDEO_REQUEST_CODE)
}

/**
 * 调用系统前置摄像头进行视频录制，需要保证有摄像头权限。
 */
private fun recordVideo(filePathCallback: ValueCallback<Array<Uri>>?) {
    mUploadMessages = filePathCallback
    try {
        val intent = Intent(MediaStore.ACTION_VIDEO_CAPTURE)
        intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, 1)
        intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION)
        intent.putExtra("android.intent.extras.CAMERA_FACING", 1) // 调用前置摄像头
        startActivityForResult(intent, RECORD_VIDEO_REQUEST_CODE)
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

//重写onActivityResult 处理结果
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (resultCode != RESULT_OK || data == null || data.data == null) {
        umUploadMessages?.onReceiveValue(null)
        return
    }
    when (requestCode) {
        //视频选择结果处理
        PICK_VIDEO_REQUEST_CODE -> {
            mUploadMessages?.onReceiveValue(
                WebChromeClient.FileChooserParams.parseResult(resultCode, data)
            )
        }
        //摄像头录制结果处理
     RECORD_VIDEO_REQUEST_CODE -> {
            val uris = data.data?.let { arrayOf(it) }
            mUploadMessages?.onReceiveValue(uris)
        }
    }
}

IOS 系统

申请权限

在Native App 的 info.plist 中加入以下声明：

NSMicrophoneUsageDescription 
NSCameraUsageDescription
NSPhotoLibraryUsageDescription

参考文档

对于内嵌WKWebView打开H5的App，相机权限需要两层申请:

1. 弹窗申请Native访问系统相机的权限（和普通native申请的弹窗一样）

2. 申请当前H5页面访问相机的权限，用户同意后可正常使用相机。

如步骤1已经授权, 则只会进行步骤2. 且每次进入H5都会进行第2步申请权限.
建议在进入H5前, 先完成native本身的权限申请, 避免某些机型的兼容问题.