Electron App Example for Casdoor

An Electron app example that demonstrates Casdoor's integration capabilities.

How to Run the Example

初始化

You need to initialize 6 parameters, all of which are string type:

名称	描述	路径
serverUrl	Your Casdoor server URL	src/App.js
clientid	The Client ID of your Casdoor application	src/App.js
appName	The name of your Casdoor application	src/App.js
redirectPath	The path of the redirect URL for your Casdoor application, will be /callback if not provided	src/App.js
clientSecret	The Client Secret of your Casdoor application	src/App.js
casdoorServiceDomain	Your Casdoor server URL	public/electron.js

如果您没有设置这些参数， 此项目将使用 Casdoor 在线演示 作为默认的Casdoor 服务器，并使用 Casnode 作为默认的 Casdoor 应用程序。

Available Commands

在项目目录中，您可以运行：

npm run dev 或者 yarn dev

Builds the electron app and runs this app.

npm run make 或者 yarn make

Packages and distributes your application. 它将创建 out 文件夹，您的软件包将被定位于：

// 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

Preview

Once you run this Electron application, a new window will appear on your desktop. If you click the Login with Casdoor button, your default browser will automatically open and display the login page. Following a successful login, your Electron application will open, and your user name will be displayed on your application. You can preview the entire process in the gif image below.

Integration Steps

设置自定义协议

首先，您需要设置自定义协议名为 casdoor。

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);
}

This will allow the browser to open your electron application and send the login info to the electron application.

Open the login URL in the browser

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

You can change the first five parameters.

监听开启的应用程序事件

Once you successfully log in through the browser, the browser will open your Electron application. Therefore, you must listen to the open application 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);
      }
    }
  });
}

您可以从broswer获取代码，即casdoor_code或params.code。

解析代码并获取用户信息

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;
});

Finally, you can parse the code and get the user info following the OAuth docs page.