反應本地Facebook登錄給出的錯誤不能得到auth/facebook

Question

你好我不太熟悉react-native，我開始開發Facebook登錄使用護照和表達js在反應原生。

我實施了該代碼，但是當我在登錄點擊與Facebook它會打開瀏覽器，並給出了錯誤

不能得到認證/ Facebook的

我的網址是http://localhost:8081/auth/facebook作爲有效的OAuth重定向URL

我不知道如何把有效的URL在有效的OAuth重定向URL在Facebook的開發者控制檯也

我已經創建的後端文件夾在我的項目，創造了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是作爲follws

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

出口const的谷歌= { 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" 
    } 
    } 

我需要知道，如何把有效的本地主機地址在開發者控制檯和應用程序也。

，以及如何解決無法獲得認證/ Facebook的錯誤

Answer 1

使用Facebook SDK的陣營本地https://github.com/facebook/react-native-fbsdk。所有你需要做的就是安裝此SDK：

react-native install react-native-fbsdk 

然後連接到本機的反應項目：

react-native link react-native-fbsdk 

一旦您設置的指示在回購，實現登錄與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> 
    ); 
} 
}); 

就是這樣，您應該可以登錄！