From 16f58eb155ac263c3977f003222f3e08c4e673e3 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Fri, 11 Mar 2022 18:04:28 +0800 Subject: [PATCH] update: app docs --- docs/tutorial/app-oauth-apple.md | 8 +- docs/tutorial/app-oauth-facebook-open.md | 138 +++++++++++------------ docs/tutorial/app-oauth-google-open.md | 87 ++++---------- docs/tutorial/app-oauth-qq.md | 2 +- docs/tutorial/app-oauth-weibo.md | 2 +- docs/tutorial/app-oauth-weixin.md | 2 +- 6 files changed, 95 insertions(+), 144 deletions(-) diff --git a/docs/tutorial/app-oauth-apple.md b/docs/tutorial/app-oauth-apple.md index 4ad344487..5e9770d4b 100644 --- a/docs/tutorial/app-oauth-apple.md +++ b/docs/tutorial/app-oauth-apple.md @@ -7,9 +7,9 @@ 使用苹果登录首先需要在苹果开发者后台开启 App 的 `Sign In with Apple` 服务： - 登录到[苹果开发者后台](https://developer.apple.com/) - 在[Identifiers](https://developer.apple.com/account/resources/identifiers/list)页面选择应用的 App ID（Bundle ID）进入编辑 `Capabilities` 界面，勾选 `Sign In with Apple` 服务并保存 -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/apple-appid.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/apple-appid.png) - 修改 `Sign In with Apple` 配置后需要到 [Profiles](https://developer.apple.com/account/resources/profiles/list) 更新 profile 描述文件（不需要新建），点击 Edit 重新编辑对应的 profile 文件，然后下载保存使用新的 profile 文件即可 -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/apple-profile.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/apple-profile.png) > 注：只有发布Appstore的应用才能使用苹果登录。企业版开发者账号不支持 `Sign In with Apple` （企业版开发者账号指的是用于企业内部分发App，不能用于发布 App Store 的账号，也就是价格为 299$ 的账号） @@ -17,7 +17,7 @@ ### 配置 打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“苹果登录（Sign in with Apple）”： -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/apple-manifest.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/apple-manifest.png) **注意** - HBuilderX中标准真机运行基座使用的是企业证书签名，不支持`Sign In with Apple` @@ -40,7 +40,7 @@ - 具体规则请参考苹果 [官方文档](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/) 下面是原生端默认的几种按钮样式供大家参考（width:130pt, height:30pt, corner radius: 6pt） -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/apple-style-zh.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/apple-style-zh.png) #### 示例代码 diff --git a/docs/tutorial/app-oauth-facebook-open.md b/docs/tutorial/app-oauth-facebook-open.md index beb587702..d7af7bb00 100644 --- a/docs/tutorial/app-oauth-facebook-open.md +++ b/docs/tutorial/app-oauth-facebook-open.md @@ -1,74 +1,66 @@ -### 开通 -- 注册[Facebook](http://www.facebook.com)账号 -- 登录[Facebook开发者中心](http://developers.facebook.com/)，打开“我的应用”页面 -- 点击“创建应用”，根据提示填写应用信息 -- 创建应用完成后即可获得应用编号(AppID) -- 进入应用详情页面，为应用添加登录功能，并配置Android/iOS平台信息 - -更多信息详见 [申请开通Facebook登录操作指南](https://uniapp.dcloud.io/app-oauth-facebook-open) - - -### 配置 -打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“Facebook登录”： -![](https://native-res.dcloud.net.cn/images/uniapp/oauth/facebook-manifest.png) - -- appid -Facebook开发者中心申请的应用编号（AppID） - -**注意** -- HBuilderX中标准真机运行基座使用的是DCloud申请HBuilder应用的AppID等信息，仅用于体验Facebook登录功能 -- 配置参数需提交云端打包后才能生效，真机运行时请使用[自定义调试基座](https://ask.dcloud.net.cn/article/35115) - - -### 使用Facebook登录 - -- uni-app项目 -调用 [uni.login(OBJECT)](api/plugins/login?id=login) 发起授权登录，调用 [uni.getUserInfo(OBJECT)](https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo) 获取用户信息，OBJECT参数中provider属性值固定为`facebook` -- 5+ App项目 -调用 [plus.oauth.getServices(successCB,errorCB)](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.getServices) 获取登录服务对象 [plus.oauth.AuthService](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService), 再调用其 [login](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService.login) 方法进行登录认证、[getUserInfo](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService.getUserInfo)方法获取用户信息 - - -#### 示例代码 -- uni-app项目 -``` js -uni.login({ - provider: 'facebook', - success: function (loginRes) { - // 登录成功 - uni.getUserInfo({ - provider: 'facebook', - success: function(info) { - // 获取用户信息成功, info.authResult保存用户信息 - } - }) - }, - fail: function (err) { - // 登录授权失败 - // err.code是错误码 - } -}); -``` - -- 5+ App项目 -``` js -var facebookOauth = null; -plus.oauth.getServices(function(services) { - for (var i in services) { - var service = services[i]; - // 获取微信登录对象 - if (service.id == 'facebook') { - facebookOauth = service; - break; - } - } - facebookOauth.login( function(oauth){ - // 授权成功，facebookOauth.authResult 中保存授权信息 - }, function(err) { - // 登录授权失败 - // err.code是错误码 - }) -}, function(err) { - // 获取 services 失败 -}) -``` +#### 准备条件 +- 可访问Facebook服务器 +注意：中国境内可能无法访问Fackbook服务器 +- 注册Facebook账号，登录[Facebook](http://www.facebook.com) + + +#### 创建应用 +* 打开[Facebook开发者中心](http://developers.facebook.com/) +* 点击右上角"我的应用" +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/9e3ba994-95b0-46d6-9e40-0c18b9fac5d3.png) + +* 进入应用管理界面，点击"创建应用" +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/0d96a58b-e31d-4f86-9372-dd84249a498b.png) + + +* 根据需要选择应用产品的类型(应用类型详见"详细了解应用类型")，然后点击继续 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/a940cfc2-8e8c-44cf-9334-56cb282d4f52.png) + + +* 填写应用信息 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/57f5f5c0-27ca-4aa7-9e68-fb051c8afccb.png) + + +* 创建完成后即可获取应用的应用编号(即appID) + +* 为应用添加登录功能 + +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/4e7ad147-e4ce-40eb-a1b0-2381bdc53813.png) + + + +#### 设置登录-iOS +* 我的应用--设置--基本，选择添加平台，选择iOS +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/cebc70d2-da0e-4708-9d05-d5f5d80de1ca.png) + + +* 填写信息保存即可 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/70038074-8c3a-4db8-99ab-49e14b951c79.png) + + + +#### 设置登录-Android + +* 我的应用--设置--基本，选择添加平台 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/a8fe2779-1142-452b-a4b0-f4bd61695770.png) + + +* 选择android平台，应用商店选择Google Play +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/afa346b7-a001-47b1-9c7e-914074153ac3.png) + + +* 填写必要的包名和散列信息，类名是固定的。如图 +散列的获取方法，参考文档： +https://developers.facebook.com/docs/facebook-login/android 第六小节 +如果获取到的散列位数不对，需要找台linux/mac 计算机。 +使用下面的命令获取 +keytool -exportcert -alias hbuilder -keystore ./HBuilder.keystore | openssl dgst -sha1 -binary | openssl base64 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/4c59adf0-cb40-41d7-95d4-e26102aeacd9.png) + + + +#### 应用权限 +使用Facebook登录需开启"public_profile"以及"email"的访问权限 +点击"应用审核"-"权限和功能"，开启"public_profile"以及"email"的高级访问权限 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/28dac1d2-f714-4477-a5c8-dd2e1b894894.png) diff --git a/docs/tutorial/app-oauth-google-open.md b/docs/tutorial/app-oauth-google-open.md index af80fb7a2..3e6aa5e3c 100644 --- a/docs/tutorial/app-oauth-google-open.md +++ b/docs/tutorial/app-oauth-google-open.md @@ -1,74 +1,33 @@ -### 开通 -- 注册[Google](https://accounts.google.com/)账号 -- 登录[Google Cloud Platform](https://console.cloud.google.com/)，打开“选择项目”界面选择已经创建的项目，如果没有创建项目，点击“新建项目”根据页面提示创建项目 -- 在左侧导航栏中选择 “API和服务” -> “凭证” 打开管理页面 -- 点击 “创建凭证” -> “OAuth客户端ID”，根据提示选择“应用类型”，按需分别输入Android/iOS平台配置信息 -- 创建凭证后iOS平台可以获取客户端ID（Android平台不需要客户端ID） +#### 准备条件 +- 可访问Google服务器 +注意：中国境内无法访问Google服务器 +- 注册Google账号 -更多信息详见 [申请开通Google登录操作指南](https://uniapp.dcloud.io/app-oauth-facebook-open) +#### Android开通步骤 -### 配置 -打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“Google登录”： -![](https://native-res.dcloud.net.cn/images/uniapp/oauth/google-manifest.png) +* 打开Google 登录引导页 +网址： https://developers.google.com/identity/sign-in/android/sign-in?hl=zh-cn -- iOS平台客户端ID -Google云平台创建的OAuth2.0凭证的iOS平台客户端ID +* 选择项目配置 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/636a9bd3-77d7-4539-b46c-0c798eb49350.png) +点击后出现项目与应用选择界面，如果你有已创建过的Firebase项目，可以直接选择。如果没有，可以选择新建一个Google Api 项目。 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/f206ec8a-c82d-41f4-9e6d-d838e21a4857.png) -**注意** -- HBuilderX中标准真机运行基座使用的是DCloud申请HBuilder应用的AppID等信息，仅用于体验Google登录功能 -- 配置参数需提交云端打包后才能生效，真机运行时请使用[自定义调试基座](https://ask.dcloud.net.cn/article/35115) +* 选择项目后，在该项目下新建一个应用 +选择应用平台 android +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/09c5a8aa-c698-4133-9a11-d73d59e37da5.png) +需要填写应用的包名和sha1指纹,指纹的获取方法在界面上有提示。按照提示操作即可。 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/d14feca3-94b5-467e-b197-d98b866072bc.png) +点击创建，即可完成开通步骤。 +#### iOS开通步骤 -### 使用Google登录 +* 打开[Google登录iOS引导页](http://developers.google.com/identity/sign-in/ios/start-integrating?hl=zh-cn) -- uni-app项目 -调用 [uni.login(OBJECT)](api/plugins/login?id=login) 发起授权登录，调用 [uni.getUserInfo(OBJECT)](https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo) 获取用户信息，OBJECT参数中provider属性值固定为`google` -- 5+ App项目 -调用 [plus.oauth.getServices(successCB,errorCB)](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.getServices) 获取登录服务对象 [plus.oauth.AuthService](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService), 再调用其 [login](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService.login) 方法进行登录认证、[getUserInfo](https://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService.getUserInfo)方法获取用户信息 +* 点击创建OAuth客户端ID，填写项目名称 +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/1978e9aa-5e11-4586-9caf-1c1b7c3e71bd.png) - -#### 示例代码 -- uni-app项目 -``` js -uni.login({ - provider: 'google', - success: function (loginRes) { - // 登录成功 - uni.getUserInfo({ - provider: 'google', - success: function(info) { - // 获取用户信息成功, info.authResult保存用户信息 - } - }) - }, - fail: function (err) { - // 登录授权失败 - // err.code是错误码 - } -}); -``` - -- 5+ App项目 -``` js -var googleOauth = null; -plus.oauth.getServices(function(services) { - for (var i in services) { - var service = services[i]; - // 获取微信登录对象 - if (service.id == 'google') { - googleOauth = service; - break; - } - } - googleOauth.login( function(oauth){ - // 授权成功，googleOauth.authResult 中保存授权信息 - }, function(err) { - // 登录授权失败 - // err.code是错误码 - }) -}, function(err) { - // 获取 services 失败 -}) -``` +* 选择iOS平台、填写BundleID后，点击CREATE，即可获取Client ID +![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/26045e0b-b6f0-4c22-aa61-0d63120e1a4b.png) diff --git a/docs/tutorial/app-oauth-qq.md b/docs/tutorial/app-oauth-qq.md index f14d7f726..a790ba2af 100644 --- a/docs/tutorial/app-oauth-qq.md +++ b/docs/tutorial/app-oauth-qq.md @@ -10,7 +10,7 @@ ### 配置 打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“QQ登录”： -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/qq-manifest.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/qq-manifest.png) - appid QQ开放平台申请应用的AppID值 diff --git a/docs/tutorial/app-oauth-weibo.md b/docs/tutorial/app-oauth-weibo.md index 5dcfacbfd..0ed2b0a23 100644 --- a/docs/tutorial/app-oauth-weibo.md +++ b/docs/tutorial/app-oauth-weibo.md @@ -11,7 +11,7 @@ ### 配置 打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“新浪微博登录”： -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/sina-manifest.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/sina-manifest.png) - appkey 新浪微博开放平台申请应用的AppKey值 diff --git a/docs/tutorial/app-oauth-weixin.md b/docs/tutorial/app-oauth-weixin.md index 69dde1b9f..0abbea33c 100644 --- a/docs/tutorial/app-oauth-weixin.md +++ b/docs/tutorial/app-oauth-weixin.md @@ -9,7 +9,7 @@ ### 配置 打开项目的manifest.json文件，在“App模块配置”项的“OAuth(登录鉴权)”下，勾选“微信登录”： -![](https://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/images/uniapp/oauth/weixin-manifest.png) +![](https://native-res.dcloud.net.cn/images/uniapp/oauth/weixin-manifest.png) - appid 微信开放平台申请应用的AppID值 -- GitLab