Hallo! Ich arbeitete an der Erstellung einer einfachen Authentifizierungsanwendung mit SAWO Labs. Während des Prozesses stellte ich fest, dass es notwendig war, mehr zu wissen, als die offiziellen Unterlagen enthielten.

Hier ist dann eine kurze exemplarische Vorgehensweise, die Ihnen hilft, die SAWO Labs-Authentifizierung in eine React-Anwendung zu integrieren.

In unserer kleinen App:

• Wir werden eine Login-Seite haben.
• Wir werden eine Dashboard-Seite haben.
• Nur ein authentifizierter Benutzer kann die Dashboard-Seite aufrufen.
• Wir werden VSCode und NPM als unseren Paketmanager verwenden.

• Sie benötigen ein SAWO Labs-Konto, um dieses tolle Zeug zu verwenden. Gehen Sie zu www.sawolabs.com, erstellen Sie Ihr erstes Projekt und setzen Sie den Host auf localhost, wenn Sie sich für lokale Entwicklung entschieden haben. Andernfalls können Sie Host als Ihre Anwendungs-URL festlegen.
• Sie können die CodeSandbox React-Vorlage verwenden, oder wenn Sie dies lokal tun, verwenden Sie den folgenden Befehl: npx create-react-app client.
• 10 Minuten später…
• Wir müssen das SAWO Labs-Paket in unserer node_modules. cd clientGehen Sie also zum Terminal, stellen Sie sicher, dass Sie den folgenden Befehl eingegeben und ausgeführt haben , um das SAWO-Paket zu installieren: npm i sawo.
• Sobald das Paket installiert ist, gehen Sie zu src/app.js.
• Bereinigen Sie die Datei, indem Sie unnötigen Code entfernen, und das endgültige Aussehen von src/app.js sollte so aussehen:

/* src/app.js */
import React from "react";
import "./App.css";
function App() {
  return (
    <div id="App">
    </div>
  );
}
export default App;

import React from "react";
import "./App.css";
import Sawo from "sawo";

REACT_APP_API_SAWO=11example1-821fexampled23-19830-318example2312

/* src/app.js */
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Sawo from "sawo";
function App() {
   return (
         <div
          id="sawo-container"
          style={{ height: "300px", width: "300px" }}
        ></div>
  );
}
export default App;

Wir müssen das SDK aufrufen, wenn unsere divmit id as sawo-containergerendert wird. Wir werden also den React.useEffect()Hook verwenden, um diese Bedingung in der Datei zu erfüllen src/app.js.

/* src/app.js */
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Sawo from "sawo";
function App() {

/*
This makes sure when the component is rendered, 
it is called only once.
*/
React.useEffect(() => { }, []); 

 return (
         <div
          id="sawo-container"
          style={{ height: "300px", width: "300px" }}
        ></div>
  );
}
export default App;

• Nachdem wir die Konfiguration vorbereitet haben, erstellen configwir mit dem eine neue SAWO-Instanz und führen die showFormMethode aus. Schließlich useEffectsieht wie folgt aus :

React.useEffect(() => {
  var config = {
      containerID: "sawo-container",
      identifierType: "email",
      apiKey: process.env.REACT_APP_API_SAWO,
      onSuccess: (payload) => {
        console.log(payload); 
      },
    };
    let sawo = new Sawo(config);
    sawo.showForm();
 }, []);

• Wir werden eine Datei erstellen src/Dashboard.js, die wie folgt aussieht.

import React from "react";
const Dashboard = (props) => {
  return (
    <>
       <h2>Private Dashboard</h2>
        Email: {props.payload.identifier}
    </>
  );
};
export default Dashboard;

• Wir müssen unsere Dashboard-Komponente in die App importieren.
• Wir müssen einen Zustand erstellen, der die Nutzlast speichert, nachdem der Benutzer authentifiziert wurde.

/* src/app.js */
import React from "react";
import logo from "./logo.svg";
import "./App.css";
/* This imports Dashboard Component*/
import Dashboard from './dashboard'
import Sawo from "sawo";
function App() {
/* We are creating a state, using the useState hook. */
let [payload, setPayload] = React.useState(false);
/*
This makes sure when the component is rendered, 
it is called only once.
*/
React.useEffect(() => {
  var config = {
      containerID: "sawo-container",
      identifierType: "email",
      apiKey: process.env.REACT_APP_API_SAWO,
      onSuccess: (payload) => {
        // console.log(payload); 
        setPayload(payload)
      },
    };
    let sawo = new Sawo(config);
    sawo.showForm();
 }, []); 

 return (<>
         <div
          id="sawo-container"
          style={{ height: "300px", width: "300px" }}
        ></div>
        {payload && (
        <>
          <Dashboard payload={payload} />
        </>
        )}
</>
  );
}
export default App;

Weitere Inhalte unter plainenglish.io