Giter Site home page Giter Site logo

larskaare / webauthauthorandothercreatures Goto Github PK

View Code? Open in Web Editor NEW
7.0 1.0 6.0 3.79 MB

A general introduction to "modern" Web Authentication (OpenID Connect) and Authorization (OAuth2). Examples and usage is adapted to Azure AD

License: MIT License

JavaScript 78.61% CSS 0.47% HTML 17.21% Dockerfile 0.48% Pug 3.23%
oicd oauth2 azure-active-directory

webauthauthorandothercreatures's Introduction

A Hands-On Introduction to modern web based A&A


This project is archived. A new version may emerge. The code will not be updated.


Workshop is slides is published at https://larskaare.github.io/WebAuthAuthorAndOtherCreatures/. Slides are developed using reveal.js

Workshop objectives

De-mystify, build confidence and prepare for further exploration of Authentication and Authorization.

Highlights

  • Give an introduction to the basics of modern web A&A
  • Explore RFC (specs) and Azure Implementation
  • Code a few A&A scenarios
  • Insights into threats and security best current practices (BCP)

Workshop outline

  • What problem are we trying to solve?
  • Practicalities
  • The basics of A&A
  • Exercises (10+1)
    • Raw flows, add authentication to web app, using frameworks & libraries, accessing 3rd party api, refresh tokens, single page web app (SPA), PKCE, protecting web api's, chaining requests (on-behalf-of)
  • Deploy application to the Cloud (using Radix)

Pre-requisites

These are the pre-requisites that will make the workshop a whole lot more useful. Verify your development environment (by using the section below) prior to joining the workshop

Roles

  • Valid Equinor Software Developer On-Boarding
  • Valid role "Application Developer (Azure Active Directory)
  • Optional: for deploy to cloud exercise: Access to Radix Playground - role "Radix Playground Users"

Skills

Helpful knowledge and skills:

  • HTTP
  • JavaScript/Node.js
  • Linux command line
  • Optional: Docker

Software

Installed and verified to work software.

  • Node.js
    • Use Node LTS version v12.16.3
    • Using node version manager nvm is recommended on Linux/Mac. For Windows users nvm-windows could be an option.
    • Python may be needed for some node modules to install
  • Development IDE (like Visual Studio Code)
  • Git, account on github.com
  • Postman
  • Optional for deploy to cloud
    • Local Docker installation

Consideration when using Windows

Shell

Most things should work ok with the cmd or powershell - with a few limitations. I've tested with using git-bash which is part of Git for Windows

Known challenges

  • Be aware of how to export environment variables, set for Windows, export for Bash/Linux
  • Define proxy variables if needed:
  HTTP_PROXY=http://url:port
  HTTPS_PROXY=http://url:port
  • npm is a bit quicky when it comes to running scripts. Doing npm start may fail, but copying the command from package.json and running from the terminal works for most scenarios. Configuring NPM to use a different shell could be an option npm config set shell-script could be an option to explore.
  • Using Docker Desktop for Windows should work fine. Remeber to define proxy settings if your beind one of these. Update the ~/.docker/config.json with something like this (update urland port to reflect your context):
{"proxies":
  {
    "default":
      {
        "httpProxy": "http://url:port",
        "httpsProxy": "http://url:port",
        "noProxy": ""
      }
  }
}

Verifying working environment

Please verify that the tools work properly within your network environment. Typical problems would be related to PROXY settings.

$ git --version
git version 2.24.3

Should produce proof of an up to date version of git Git

$ node --version
v12.16.3

Should produce proof of an up to date LTS version of NodeJS

$ npm --version
6.14.4

Npm is installed with NodeJS

$ python --version
Python 2.7.16

Should produce proof of a relevant 2.7 version of Python2

$ docker --version
Docker version 19.03.8

Should produce evidence of an update to date version of docker Docker

Testing with the hello app

To verify your working environment I recommend testing the hello app. Use the following procdure

  • Clone this repository
  • Open a terminal and "cd" into the "ex-0" folder
  • Executing "npm install" should install dependencies with no fatal errors.
  • Executing "npm start" should provide the name of a Taco recipie with no fatal errors
  • Optional: Executing "docker build -t hello ." should build a docker image with no fatal errors
  • Optional: Executing "docker run hello" should provide the name of a Taco recipie with no fatal errors

Using docker-compose to provide the developer environment

The ./docker-compose.yaml contains everything we need to run a development environment.

Start

You will want to use 2-3 terminal sessions ("tabs") for this as it is easier to see what is going on where.

Session 1: Build and start the development container

Step 1: Create the workshop config file for docker-compose
Copy the template file workshop-credentials.env-template and rename the copy to workshop-credentials.env, then provide the missing values. (Verify that new .env this file is kept out of version control)

Step 2: Start the development container

docker-compose up --build

Notes for windows users:

  • If you are using WSL1: Start docker-compose in windows cmd as this will use the native windows docker client that will handle path translation for you.
  • If you are using WSL2
    You are in a happy place, stay there.

Session 2: Run commands inside the development container

# Open a bash session into the development container
docker exec -it workshop_development_container bash

# From inside the container you can then run any npm command.

# Example - Exercise 2
# First install all packages for exercise 2
cd ex-2
npm install
# Then start the nodejs application
npm start

Session 3: Access the files in host

# Bring up your IDE and start hacking away.
# Please note that template files will not be hot reloaded, see "Notes" down below
code .

# Run git commands etc
git status

Stop

Stop and remove all started containers and networks

docker-compose down

You can always bomb out using ctrl+c and similar in the session where docker-compose is running, the drawback is that there will be leftovers from the docker-compose process.
By using command docker-compose down you will get a clean exit.
Optionally you can provide even more arguments to specify what should be cleaned up for more advanced use cases.

webauthauthorandothercreatures's People

Contributors

dependabot[bot] avatar jonaspetersorensen avatar larskaare avatar snyk-bot avatar steinsiv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

webauthauthorandothercreatures's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.