带有PassportJs的MERN网络应用程序以及具有mongodb针脚自定义身份验证的react-native?

时间:2019-08-13 11:02:46

标签: reactjs mongodb react-native passport.js mongodb-stitch

我的Web应用程序在mongodb atlas副本集群集上工作, 我可以使用passwordjs身份验证系统

登录到我的应用程序中的后端服务器
const LocalStrategy = require("passport-local").Strategy;

并通过cookieSession im成功地保留了登录过程,直到用户注销为止。

const cookieSession = require("cookie-session");

现在我的数据库用户模型如下所示

enter image description here

我正在构建一个React-native应用程序,并希望使用mongodb Stitch以与后端Web服务器中存储的相同凭据登录该应用程序

import {
  Stitch,
  AnonymousCredential,
  UserPasswordCredential,
  RemoteMongoClient,
  CustomAuthProvider,
  CustomCredential
} from "mongodb-stitch-react-native-sdk"; 

实现此目标的最佳做法是什么?

注意: 下面的示例提供匿名身份验证以及用户名和密码,但这两个都无法满足我们在此处使用Web服务器凭据进行身份验证所需的条件 enter image description here

import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import {
  Stitch,
  AnonymousCredential,
  UserPasswordCredential,
  RemoteMongoClient,
  CustomAuthProvider,
  CustomCredential
} from "mongodb-stitch-react-native-sdk";
import Axios from "axios";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUserId: undefined,
      client: undefined,
      credential: new UserPasswordCredential("cahmedc@gmail.com", "123456"),
    };
    this._loadClient = this._loadClient.bind(this);
    this.getConsultations = this.getConsultations.bind(this);
    this._onPressLogin = this._onPressLogin.bind(this);
    this._onPressLogout = this._onPressLogout.bind(this);
    this.onPressPingButton = this.onPressPingButton.bind(this);
  }

  componentDidMount() {
    this._loadClient();
  }

  render() {
    let loginStatus = "Currently logged out.";

    if (this.state.currentUserId) {
      loginStatus = `Currently logged in as ${this.state.currentUserId}!`;
    }

    const loginButton = <Button onPress={this._onPressLogin} title="Login" />;

    const logoutButton = (
      <Button onPress={this._onPressLogout} title="Logout" />
    );


    return (
      <View style={styles.container}>
        <Text> {loginStatus} </Text>
        {this.state.currentUserId !== undefined ? logoutButton : loginButton}
        {this.state.currentUserId && pingButton}
      </View>
    );
  }

  _loadClient() {
    Stitch.initializeDefaultAppClient("myApp-ID").then(client => {
      this.setState({ client });
      if (client.auth.isLoggedIn) {
        this.setState({ currentUserId: client.auth.user.id });
      }
    });
    // const db = this.state.client
    //   .getServiceClient(RemoteMongoClient.factory, "mongodb1")
    //   .db("test");
  }

  _onPressLogin() {
    // this.state.client.auth
    //   .loginWithCredential(new AnonymousCredential())
    //   .then(user => {
    //     console.log(`Successfully logged in as user ${user.id}`);
    //     this.setState({ currentUserId: user.id });
    //   })
    //   .catch(err => {
    //     console.log(`Failed to log in anonymously: ${err}`);
    //     this.setState({ currentUserId: undefined });
    //   });

    this.state.client.auth
      .loginWithCredential(this.state.credential)
      // Returns a promise that resolves to the authenticated user
      .then(authedUser =>
        console.log(`successfully logged in with id: ${authedUser.id}`)
      )
      .catch(err => console.error(`login failed with error: ${err}`));
  }

  _onPressLogout() {
    this.state.client.auth
      .logout()
      .then(user => {
        console.log("Successfully logged out");
        this.setState({ currentUserId: undefined });
      })
      .catch(err => {
        console.log(`Failed to log out: ${err}`);
        this.setState({ currentUserId: undefined });
      });
  }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

0 个答案:

没有答案