Swimlanes.io is a free webapp for making sequence diagrams. You simply edit the text on the left and the diagram is updated in real time. You can download your sequence diagrams as images or distribute with a link.
title: Github OAuth Web App Flow order: Browser, Server note: [Register your app](https://github.com/settings/applications/new) and specify a `callback_url` Browser -> Github: Redirect user to request GitHub access note: [https://github.com/login/oauth/authorize?client_id=`client_id`&scope=`scope`&state=`state`](https://developer.github.com/v3/oauth/#1-redirect-users-to-request-github-access) `client_id`: The client ID you received from GitHub when you registered. `scope`: A space delimited list of [scopes](https://developer.github.com/v3/oauth/#scopes). E.g. *user:email* to be able to get the users email. `state`: An unguessable random string. It is used to protect against cross-site request forgery attacks. if: First time user Github -> Browser: Accept access? Browser -> Github: Yep end Github -> Browser: Redirect to `callback_url` with `code` and `state` Browser -> Server: `callback_url`?code=`code`&state=`state` Server -> Server: Verify `state` Server -> Github: Get access_token note: POST [https://github.com/login/oauth/access_token](https://developer.github.com/v3/oauth/#2-github-redirects-back-to-your-site) ``` { client_id: "id from registration", client_secret: "secret from registration", code: "code from callback" } ``` Github -> Server: `access_token` Server -> Github: Get user details note: GET [https://api.github.com/user?access_token=`access_token`](https://developer.github.com/v3/oauth/#3-use-the-access-token-to-access-the-api) Github -> Server: user details note: See [API doc](https://developer.github.com/v3/users/#get-the-authenticated-user) for details about the response Server -> Server: Store user details Server -> Browser: Signed in