Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qq_24279267
unidocs-zh
提交
0747b9cf
U
unidocs-zh
项目概览
qq_24279267
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0747b9cf
编写于
3月 09, 2022
作者:
DCloud-yyl
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update app-oauth-facebook.md
上级
5d597368
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
73 addition
and
65 deletion
+73
-65
docs/app-oauth-facebook.md
docs/app-oauth-facebook.md
+73
-65
未找到文件。
docs/app-oauth-facebook.md
浏览文件 @
0747b9cf
#### 准备条件
-
可访问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
)
### 开通
-
注册
[
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://partner-dcloud-native.oss-cn-hangzhou.aliyuncs.com/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 失败
})
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录