Question

我正在尝试在我的本机应用中设置正确的Facebook登录信息。现在我让它在纯webview中工作，oauth登录到我的服务器但是我想使用本机facebook登录才能利用facebook应用程序。

我正在使用以下库：

服务器端

App方

https://github.com/magus/react-native-facebook-login

因此，通过在网页浏览中调用/oauth/v2/auth并处理令牌，我的Facebook登录功能在我的网站以及我在OAview的网页视图中的应用上都非常实用。

但它有点混乱，因为在webview中你必须输入完整的电子邮件+密码组合。

所以现在我在登录成功事件（通过本机插件）的webview中调用/login/facebook-check时收到授权错误，我可以使用一些帮助来完成此操作。

Answer 1

终于成功了。黑客是使用所有现有服务一起工作。

我制作了一个自定义控制器。需要进行一些安全检查，但仍然有效：

/**
 * @Route("/api/facebook-connect/{accessToken}", name="api_facebook_connect", defaults={"_format" = "json"})
 * @Rest\View()
 */
public function facebookLoginAction($accessToken, Request $request)
{
    $token = new OAuthToken($accessToken);
    $token->setResourceOwnerName('facebook');

    $oauthUserProvider = $this->get('app.oauth.provider.user_provider');
    $ressourceOwnerMap = $this->get('hwi_oauth.resource_ownermap.main');
    $userChecker = new UserChecker();

    $oauthProvider = new OAuthProvider($oauthUserProvider, $ressourceOwnerMap, $userChecker);
    $token = $oauthProvider->authenticate($token);
    $this->get('security.token_storage')->setToken($token);

    $client = $this->get('doctrine.orm.entity_manager')->getRepository('AppBundle:Client')->findOneBy([], ['id' => 'DESC']);

    $oauth2server = $this->get('fos_oauth_server.server');
    $accessToken = $oauth2server->createAccessToken($client, $this->getUser(), 'user', 3600);

    return $accessToken;
}

在我清理它时会更新这个。

Answer 2

我不确定如何正确处理服务器端部分，但是这里有一些关于我们如何在我们的应用程序中集成Facebook登录的详细信息：

我们首先使用https://github.com/magus/react-native-facebook-login开始，但后来切换到https://github.com/facebook/react-native-fbsdk，由Facebook维护并允许访问其他Facebook服务（特别是，我们使用了共享API）< / p>
在这两种情况下（react-native-fbsdk与否），流程都是这样的：
- 我们有一个Connect with Facebook按钮（一个普通的按钮，没什么特别的 - 我们没有使用模块提供的按钮）。
- 单击时，我们使用适当的权限调用Login方法。这应该是开箱即用的，这意味着您将显示Web视图（如果您没有Facebook应用程序）或显示本机Facebook应用程序。
- 如果用户拒绝登录该应用，则不会发生任何事情。
- 如果用户接受，该应用将收到可用于代表用户向Facebook API发出呼叫的访问令牌。这看起来像使用react-native-fbsdk：
```
// This can be put in a Facebook login button component or a service,
// and should be called when the user wants to connect with Facebook
LoginManager.logInWithReadPermissions(permissions).then((result) => {
  if (result.isCancelled) {
    this.props.onCancel();
    return;
  }

  AccessToken.getCurrentAccessToken().then((data) => {
    this.props.onLogin(data);
  });
}, (error) => {
  console.warn('Facebook Error', error);
});
```
- 然后我们将访问令牌发送到我们的服务器，该服务器能够通过Facebook Graph API获取用户的个人资料，如果需要，在服务器上创建用户帐户（即：如果它是第一次用户登录）。
```
// Called once we got the access token from the data in the previous
// step (this.props.onLogin(data)).
loginWithFacebook(facebookAccessToken) {
  return fetch(`${apiHost}/api/login/facebook`, {
    method: 'GET',
    headers: {
      // We pass the access token using the Authorization header:
      Authorization: `Bearer ${facebookAccessToken}`,
    },
  }).then(() => {
    // Whatever, for example get the user info returned by the server
    // and store them.
  });
}
```
- 在服务器上，我们从标题中获取访问令牌并使用它来获取用户配置文件（为我们的应用填充用户的帐户，例如使用他的头像和名称）并关联用户帐户用户的脸书ID。

如果用户拥有Facebook应用程序且已经接受了应用程序，则下次尝试登录时不会向他询问任何内容。您只需单击登录按钮并登录到应用程序:) 如果用户没有Facebook应用程序，Facebook SDK将始终显示带有登录页面的webview。

希望这有帮助！

Facebook使用symfony服务器

服务器端

App方

2 个答案: