首页 文章

反应本机facebook登录给出错误无法获取auth / facebook

提问于
浏览
0

你好,我不熟悉react-native,我开始使用护照开发facebook登录,并在本地反应表达js .

我实现了代码,但是当我点击登录Facebook时,它将打开浏览器并给出错误

无法获得身份验证/脸书

我的网址是http://localhost:8081/auth/facebook作为有效的Oauth重定向网址

我不知道如何在Facebook开发者控制台中将有效的Url放入有效的Oauth重定向网址中

我在我的项目中创建了后端文件夹并创建了config.js server.js文件

我的server.js如下

import express from 'express';
import passport from 'passport';
import FacebookStrategy from 'passport-facebook';
import GoogleStrategy from 'passport-google-oauth20';
// Import Facebook and Google OAuth apps configs
import { facebook, google } from './config';

// Transform Facebook profile because Facebook and Google profile objects look different
// and we want to transform them into user objects that have the same set of attributes
const transformFacebookProfile = (profile) => ({
  name: profile.name,
  avatar: profile.picture.data.url,
});

// Transform Google profile into user object
const transformGoogleProfile = (profile) => ({
  name: profile.displayName,
  avatar: profile.image.url,
});

// Register Facebook Passport strategy
passport.use(new FacebookStrategy(facebook,
  // Gets called when user authorizes access to their profile
  async (accessToken, refreshToken, profile, done)
    // Return done callback and pass transformed user object
    => done(null, transformFacebookProfile(profile._json))
));

// Register Google Passport strategy
passport.use(new GoogleStrategy(google,
  async (accessToken, refreshToken, profile, done)
    => done(null, transformGoogleProfile(profile._json))
));

// Serialize user into the sessions
passport.serializeUser((user, done) => done(null, user));

// Deserialize user from the sessions
passport.deserializeUser((user, done) => done(null, user));

// Initialize http server
const app = express();

// Initialize Passport
app.use(passport.initialize());
app.use(passport.session());


// Set up Facebook auth routes
app.get('/auth/facebook', passport.authenticate('facebook'));

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { failureRedirect: '/auth/facebook' }),
  // Redirect user back to the mobile app using Linking with a custom protocol OAuthLogin
  (req, res) => res.redirect('OAuthLogin://login?user=' + JSON.stringify(req.user)));

// Set up Google auth routes
app.get('/auth/google', passport.authenticate('google', { scope: ['profile'] }));

app.get('/auth/google/callback',
  passport.authenticate('google', { failureRedirect: '/auth/google' }),
  (req, res) => res.redirect('OAuthLogin://login?user=' + JSON.stringify(req.user)));

// Launch the server on the port 3000
const server = app.listen(8081, () => {
  const { address, port } = server.address();
  console.log(`Listening at http://${address}:${port}`);
});

和我的配置.js如下

export const facebook = {
clientID: 'MY CLIENT ID',
clientSecret: 'MY CLIENT SECRET',
callbackURL: 'http://localhost:8081/auth/facebook/callback',
profileFields: ['id', 'name', 'displayName', 'picture', 'email'],
};

export const google = {clientID:'MY CLIENT ID',clientSecret:'MY CLIENT SECRET',callbackURL:'http://localhost:8081/auth/google/callback',};

和我的包.json如下

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
      "start": "node node_modules/nodemon/bin/nodemon.js -- node_modules/babel-cli/bin/babel-node.js server.js"
      },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel": "^6.23.0",
      "babel-cli": "^6.24.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "nodemon": "^1.11.0"
    },
    "dependencies": {
      "cookie-session": "^2.0.0-beta.2",
      "express": "^4.15.3",
      "passport": "^0.3.2",
      "passport-facebook": "^2.1.1",
      "passport-google-oauth20": "^1.0.0"
    }
  }

我需要知道如何将有效的localhost url放在开发者控制台和应用程序中 .

以及如何解决这个问题无法获得auth / facebook错误

1 回答

  • 0

    使用Facebook SDK for React Native https://github.com/facebook/react-native-fbsdk . 您所要做的就是安装此SDK:

    react-native install react-native-fbsdk
    

    然后链接它以反应原生项目:

    react-native link react-native-fbsdk
    

    按照repo中的说明进行设置后,使用facebook实施登录,如下所示 -

    const FBSDK = require('react-native-fbsdk');
    const {
       LoginButton,
       AccessToken
    } = FBSDK;
    
    var Login = React.createClass({
       render: function() {
         return (
           <View>
             <LoginButton
               publishPermissions={["publish_actions"]}
               onLoginFinished={
                 (error, result) => {
                   if (error) {
                     alert("login has error: " + result.error);
                   } else if (result.isCancelled) {
                     alert("login is cancelled.");
                   } else {
                     AccessToken.getCurrentAccessToken().then(
                      (data) => {
                         alert(data.accessToken.toString())
                      }
                   )
                 }
              }
            }
            onLogoutFinished={() => alert("logout.")}/>
         </View>
       );
     }
     });
    

    就是这样,你应该能够登录!

相关问题