Electron app

The casdoor-electron-example shows Casdoor sign-in in an Electron app (custom protocol + browser OAuth).

Run the example

Initialisation

Set these 6 string parameters:

Nom	Description	Chemin
serverUrl	Votre URL de serveur Casdoor	src/App.js
clientId	L'ID client de votre application Casdoor	src/App.js
appName	Le nom de votre application Casdoor	src/App.js
redirectPath	Le chemin de l'URL de redirection pour votre application Casdoor, sera /callback si non fourni	src/App.js
clientSecret	Le Secret Client de votre application Casdoor	src/App.js
casdoorServiceDomain	Votre URL de serveur Casdoor	public/electron.js

Defaults: Casdoor demo and app-casnode if not set.

Commands

In the project directory:

npm run dev ou yarn dev

Construit l'application electron et exécute cette application.

npm run make ou yarn make

Package et distribue votre application. Cela créera le dossier out où votre package sera situé :

// Example for macOS out/  
├── out/make/zip/darwin/x64/casdoor-electron-example-darwin-x64-1.0.0.zip  
├── ...  
└── out/casdoor-electron-example-darwin-x64/casdoor-electron-example.app/Contents/MacOS/casdoor-electron-example

Aperçu

Running the app opens a window. Click Login with Casdoor to open the Casdoor login page in your browser.

After sign-in, the app opens and shows your username.

Integration steps

1. Définir le protocole personnalisé

Register the casdoor custom protocol:

const protocol = "casdoor";

if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient(protocol, process.execPath, [
      path.resolve(process.argv[1]),
    ]);
  }
} else {
  app.setAsDefaultProtocolClient(protocol);
}

The browser can then open your app and pass the auth code via the protocol.

2. Vous pouvez prévisualiser l'ensemble du processus dans l'image gif ci-dessous.

const serverUrl = "https://door.casdoor.com";
const appName = "app-casnode";
const redirectPath = "/callback";
const clientId = "014ae4bd048734ca2dea";
const clientSecret = "f26a4115725867b7bb7b668c81e1f8f7fae1544d";

const redirectUrl = "casdoor://localhost:3000" + redirectPath;

const signinUrl = `${serverUrl}/login/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirectUrl)}&scope=profile&state=${appName}&noRedirect=true`;

shell.openExternal(signinUrl); //Open the login url in the browser

Adjust the first five variables for your Casdoor instance.

3. Listen for the app being opened

After sign-in in the browser, the browser opens your app via the custom protocol. Listen for that event:

const gotTheLock = app.requestSingleInstanceLock();
const ProtocolRegExp = new RegExp(`^${protocol}://`);

if (!gotTheLock) {
  app.quit();
} else {
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
      commandLine.forEach((str) => {
        if (ProtocolRegExp.test(str)) {
          const params = url.parse(str, true).query;
          if (params && params.code) {
            store.set("casdoor_code", params.code);
            mainWindow.webContents.send("receiveCode", params.code);
          }
        }
      });
    }
  });
  app.whenReady().then(createWindow);

  app.on("open-url", (event, openUrl) => {
    const isProtocol = ProtocolRegExp.test(openUrl);
    if (isProtocol) {
      const params = url.parse(openUrl, true).query;
      if (params && params.code) {
        store.set("casdoor_code", params.code);
        mainWindow.webContents.send("receiveCode", params.code);
      }
    }
  });
}

The auth code is in casdoor_code or params.code.

4. Exchange the code for user info

async function getUserInfo(clientId, clientSecret, code) {
  const { data } = await axios({
    method: "post",
    url: authCodeUrl,
    headers: {
      "content-type": "application/json",
    },
    data: JSON.stringify({
      grant_type: "authorization_code",
      client_id: clientId,
      client_secret: clientSecret,
      code: code,
    }),
  });
  const resp = await axios({
    method: "get",
    url: `${getUserInfoUrl}?accessToken=${data.access_token}`,
  });
  return resp.data;
}

ipcMain.handle("getUserInfo", async (event, clientId, clientSecret) => {
  const code = store.get("casdoor_code");
  const userInfo = await getUserInfo(clientId, clientSecret, code);
  store.set("userInfo", userInfo);
  return userInfo;
});

See OAuth for the full flow.