├── .gitignore ├── README.md ├── client ├── images │ ├── favicon.ico │ └── header.svg ├── index.html ├── js │ └── script.js └── style │ └── style.css └── server ├── .env.example ├── apillon-api.js ├── package-lock.json ├── package.json └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | # These are some examples of commonly ignored file patterns. 2 | # You should customize this list as applicable to your project. 3 | # Learn more about .gitignore: 4 | # https://www.atlassian.com/git/tutorials/saving-changes/gitignore 5 | 6 | .env 7 | # Node artifact files 8 | node_modules/ 9 | dist/ 10 | 11 | # Compiled Java class files 12 | *.class 13 | 14 | # Compiled Python bytecode 15 | *.py[cod] 16 | 17 | # Log files 18 | *.log 19 | 20 | # Package files 21 | *.jar 22 | 23 | # Maven 24 | target/ 25 | dist/ 26 | 27 | # JetBrains IDE 28 | .idea/ 29 | 30 | # Unit test reports 31 | TEST*.xml 32 | 33 | # Generated by MacOS 34 | .DS_Store 35 | 36 | # Generated by Windows 37 | Thumbs.db 38 | 39 | # Applications 40 | *.app 41 | *.exe 42 | *.war 43 | 44 | # Large media files 45 | *.mp4 46 | *.tiff 47 | *.avi 48 | *.flv 49 | *.mov 50 | *.wmv 51 | 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Apillon OAuth Demo 2 | 3 | This project demonstrates how to implement OAuth authentication using the Apillon API. The client-side JavaScript code opens an OAuth window for the user to authenticate, and the server-side code generates an OAuth session, as well verifies the user's login. 4 | 5 | ### Client 6 | 7 | The client-side code is located in client/js/script.js. It contains the following key functions: 8 | 9 | - `getAuthToken()`: This function sends a GET request to the server to retrieve a session token. 10 | - `openOAuthPopup()`: This function opens a new window where the user can authenticate with Apillon. It uses the session token obtained from getAuthToken(). 11 | - `verifyUserLogin(oauthAuthToken)`: This function sends a POST request to the server to verify the user's login. It is called when the OAuth window sends a message indicating that the user has been verified. If the verification is successful, this function returns the user's account email address on Apillon, which can be further used in your own application. 12 | 13 | The client-side code also adds an event listener for the 'message' event. This event is triggered when the OAuth window sends a message to the main window. If the message's origin is 'apillon.io' and the message data indicates that the user has been verified, the OAuth window is closed and `verifyUserLogin()` is called with the user's OAuth token. 14 | 15 | ### Server 16 | 17 | The server-side code is located in server/server.js. It sets up an Express.js server with two routes: 18 | 19 | - `/session-token`: This route handles GET requests by sending a GET request to the Apillon API to retrieve a session token. The token is then sent back to the client. 20 | - `/verify-login:` This route handles POST requests by sending a request to the Apillon API to verify the user's login. The response from the Apillon API is then sent back to the client. The received token from the OAuth needs to be sent as a body parameter to this method, such that it can be verified through the Apillon API. 21 | 22 | ### Running the Server 23 | To start the server, navigate to the `server` directory and then run the following commands: 24 | - `npm install` 25 | - `npm start` 26 | 27 | This will start the server on port 3000. -------------------------------------------------------------------------------- /client/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apillon/oauth-demo/6c6a3b549ad7b21d06d6a695d1c22b2c7f5cccf7/client/images/favicon.ico -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |