Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit a694a5c

Browse files
dylanbrookesdylanbrookes
authored
Users/db/ch1165 simpler styling (#5)
1 parent 8ccbce1 commit a694a5c

30 files changed

+847
-301
lines changed

‎Dockerfile renamed to ‎01-Login/Dockerfile

File renamed without changes.

‎01-Login/EXAMPLE.env

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
PASSAGE_APP_ID=
2+
PASSAGE_API_KEY=
3+
PORT=5000

‎01-Login/README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<img src="https://assets.website-files.com/611bef56e0906b4f195e5adc/6143c10e1d92181a95f86048_PassageLogo.svg" alt="Passage logo" style="width:250px;"/>
2+
3+
<img alt="npm" src="https://img.shields.io/npm/v/@passageidentity/passage-elements?color=43BD15&label=Passage%20Elements">
4+
<br/><br/>
5+
6+
# Using Passage with Go
7+
8+
Passage provides an SDK to easily authenticate HTTP requests. Example source code can be found on GitHub, [here](https://github.com/passageidentity/example-go).
9+
10+
### Setup
11+
12+
For this example app, we'll need to provide our application with a Passage App ID and API Key. Your App ID and API Key can be found in the [Passage Console](https://console.passage.id) in your App Settings. You'll need to set the following environment variables with your respective credentials:
13+
14+
```bash
15+
PASSAGE_APP_ID=
16+
PASSAGE_API_KEY=
17+
PORT=5000
18+
```
19+
20+
### Run With Go
21+
22+
To run this example app, make sure you have [Go installed on your computer](https://golang.org/doc/install).
23+
24+
Run the following command:
25+
26+
```bash
27+
go run main.go
28+
```
29+
30+
### Run With Docker
31+
32+
Create your docker image with the following command:
33+
34+
```bash
35+
$ docker build -t example-go-1 .
36+
```
37+
38+
Run your docker container using the example-go-1 image:
39+
40+
```bash
41+
$ docker run -p 5000:5000 example-go-1
42+
```
43+
44+
### Authenticating an HTTP Request
45+
46+
A Go server can easily authenticate an HTTP request using the Passage SDK, as shown below.
47+
48+
```go
49+
import (
50+
"net/http"
51+
52+
"github.com/passageidentity/passage-go"
53+
)
54+
55+
func exampleHandler(w http.ResponseWriter, r *http.Request) {
56+
57+
// Authenticate this request using the Passage SDK.
58+
psg := passage.New("<Passage App ID>")
59+
_, err := psg.AuthenticateRequest(r)
60+
if err != nil {
61+
w.WriteHeader(http.StatusUnauthorized)
62+
return
63+
}
64+
65+
// Successful authentication. Proceed...
66+
67+
}
68+
```
69+
70+
### Authorizing a User
71+
72+
It is important to remember that the `psg.AuthenticateRequest()` function validates that a request is properly authenticated, but makes no assertions about _who_ it is authorized for. To perform an authorization check, the Passage User Handle can be referenced.
73+
74+
```go
75+
func exampleHandler(w http.ResponseWriter, r *http.Request) {
76+
77+
// Authenticate this request using the Passage SDK.
78+
psg := passage.New("<Passage App ID>")
79+
passageUserID, err := psg.AuthenticateRequest(r)
80+
if err != nil {
81+
w.WriteHeader(http.StatusUnauthorized)
82+
return
83+
}
84+
85+
// Check that the user with `passageHandle` is allowed to perform
86+
// a certain action on a certain resource.
87+
err = authorizationCheck(passageUserID)
88+
if err != nil {
89+
w.WriteHeader(http.StatusUnauthorized)
90+
return
91+
}
92+
93+
// Successful authentication AND authorization. Proceed...
94+
95+
}
96+
```
97+
98+
## Get User
99+
100+
To get user information, you can use the Passage SDK with an API key. This will authenticate your web server to Passage and grant you management
101+
access to user information. API keys should never be hard-coded in source code, but stored in environment variables or a secrets storage mechanism.
102+
103+
```go
104+
105+
psg := passage.New("<Passage App ID>", "<API_KEY>")
106+
passageUserID, err := psg.AuthenticateRequest(r)
107+
if err != nil {
108+
w.WriteHeader(http.StatusUnauthorized)
109+
return
110+
}
111+
112+
//information regarding the user will exist in the user variable
113+
user, err := psg.GetUser(passageUserID)
114+
if err != nil {
115+
fmt.Println("Could not get user: ", err)
116+
return
117+
}
118+
```
119+
120+
### Adding Authentication to the Frontend
121+
122+
The easiest way to add authentication to a web frontend is with a Passage Element. The HTML below will automatically embed a complete UI/UX for user sign-in and sign-up.
123+
124+
```html
125+
<!-- Passage will populate this custom element with a complete authentication UI/UX. -->
126+
<passage-auth app-id="<Passage App ID>"></passage-auth>
127+
128+
<!-- Include the passage-web JavaScript from the Passage CDN. -->
129+
<script src="https://cdn.passage.id/passage-web.js"></script>
130+
```

‎go.mod renamed to ‎01-Login/go.mod

File renamed without changes.

‎go.sum renamed to ‎01-Login/go.sum

File renamed without changes.

‎main.go renamed to ‎01-Login/main.go

File renamed without changes.

‎01-Login/templates/assets/index.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.main-container {
2+
background: white;
3+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
4+
border-radius: 20px;
5+
width: 310px;
6+
min-height: 310px;
7+
margin: 30px auto;
8+
}
9+
.footer {
10+
text-align: center;
11+
font-size: 18px;
12+
}
13+
14+
.dashboard{
15+
padding: 30px 30px 20px;
16+
}
17+
.title {
18+
font-size: 32px;
19+
font-weight: 700;
20+
margin-bottom: 30px;
21+
}
22+
.message {
23+
overflow-wrap: anywhere;
24+
}
25+
.link {
26+
color: black;
27+
text-decoration-color: black;
28+
}
29+
30+
html,
31+
body {
32+
padding: 0;
33+
margin: 0;
34+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
35+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
36+
}
37+
38+
a {
39+
color: inherit;
40+
text-decoration: none;
41+
}
42+
43+
* {
44+
box-sizing: border-box;
45+
}

‎01-Login/templates/assets/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.main-header{
2+
padding: 20px 30px;
3+
display: flex;
4+
align-items: center;
5+
background-color: #27417E;
6+
color: white;
7+
}
8+
.header-text {
9+
font-size: 32px;
10+
margin-left: 10px;
11+
}
12+
13+
.passage-logo {
14+
background-image: url('https://storage.googleapis.com/passage-docs/passage-logo.svg');
15+
background-repeat: no-repeat;
16+
width: 60px;
17+
height: 60px;
18+
cursor: pointer;
19+
}
20+
.spacer {
21+
flex-grow: 1;
22+
}

‎01-Login/templates/dashboard.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
16+
rel="stylesheet"
17+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
18+
crossorigin="anonymous"
19+
/>
20+
<link rel="stylesheet" href="assets/index.css" />
21+
<link rel="stylesheet" href="assets/style.css" />
22+
<title>Try Passage</title>
23+
<script
24+
async
25+
src="https://www.googletagmanager.com/gtag/js?id=G-B8V1R3HRNB"
26+
></script>
27+
<script>
28+
window.dataLayer = window.dataLayer || []; function
29+
gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config',
30+
'G-B8V1R3HRNB');
31+
</script>
32+
</head>
33+
<body>
34+
35+
<div class="main-header">
36+
<a href="https://passage.id/"><div class="passage-logo"></div></a>
37+
<div class="header-text">Passage Go Example App</div>
38+
<div class="spacer"></div>
39+
<a href="https://passage.id/" class="link" style="color: white">Go to Passage</span></a>
40+
</div>
41+
42+
<div class="main-container">
43+
<div class="dashboard">
44+
<div class="title">Welcome!</div>
45+
<div class="message">
46+
You successfully signed in with Passage.
47+
<br/><br/>
48+
Your username is:
49+
<br/>
50+
<b>{{.identifier}}</b>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="footer">
55+
Learn more with our
56+
<u><a href="https://docs.passage.id">Documentation</a></u>
57+
and
58+
<u><a href="https://github.com/passageidentity">Github</a></u>.
59+
</div>
60+
61+
<!-- Include the passage-web JavaScript from the Passage CDN. -->
62+
<script src="https://cdn.passage.id/passage-web.js"></script>
63+
</body>
64+
</html>

‎templates/index.html renamed to ‎01-Login/templates/index.html

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,27 +35,24 @@
3535
</script>
3636
</head>
3737
<body>
38-
<div class="bg-poly"></div>
39-
40-
<div class="header">
41-
build amazing things
42-
<br />
43-
with <strong>Passage.</strong>
38+
<div class="main-header">
39+
<a href="https://passage.id/"><div class="passage-logo"></div></a>
40+
<div class="header-text">Passage Go Example App</div>
41+
<div class="spacer"></div>
42+
<a href="https://passage.id/"><span class="text">Go to Passage</span></a>
4443
</div>
4544

46-
<div class="form-container">
45+
<div class="main-container">
4746
<!-- Passage will populate this custom element with a complete authentication UI/UX. -->
4847
<passage-auth app-id="{{.appID}}"></passage-auth>
4948
<!-- Include the passage-web JavaScript from the Passage CDN. -->
5049
<script src="https://cdn.passage.id/passage-web.js"></script>
5150
</div>
52-
5351
<div class="footer">
54-
Implement awesome authentication with two lines of code.
55-
<br />
56-
<a href="https://passage.id">
57-
<button class="btn btn-lg">Request Early Access</button>
58-
</a>
52+
Learn more with our
53+
<u><a href="https://docs.passage.id">Documentation</a></u>
54+
and
55+
<u><a href="https://github.com/passageidentity">Github</a></u>.
5956
</div>
6057
</body>
6158
</html>

‎01-Login/templates/unauthorized.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
16+
rel="stylesheet"
17+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
18+
crossorigin="anonymous"
19+
/>
20+
<link rel="stylesheet" href="assets/index.css" />
21+
<link rel="stylesheet" href="assets/style.css" />
22+
<title>Try Passage</title>
23+
<script
24+
async
25+
src="https://www.googletagmanager.com/gtag/js?id=G-B8V1R3HRNB"
26+
></script>
27+
<script>
28+
window.dataLayer = window.dataLayer || []; function
29+
gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config',
30+
'G-B8V1R3HRNB');
31+
</script>
32+
</head>
33+
<body>
34+
35+
<div class="main-header">
36+
<a href="https://passage.id/"><div class="passageLogo"></div></a>
37+
<div class="header-text">Passage Go Example App</div>
38+
<div class="spacer"></div>
39+
<a href="https://passage.id/" class="link" style="color: white">Go to Passage</span></a>
40+
</div>
41+
42+
<div class="main-container">
43+
<div class="dashboard">
44+
<div class="title">Unauthorized</div>
45+
<div class="message">
46+
You have not logged in and cannot view the dashboard.
47+
<br /><br />
48+
<b>
49+
<a href="/" class="link" style="color: black">Login to continue.</a>
50+
</b>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="footer">
55+
Learn more with our
56+
<u><a href="https://docs.passage.id">Documentation</a></u>
57+
and
58+
<u><a href="https://github.com/passageidentity">Github</a></u>.
59+
</div>
60+
61+
<!-- Include the passage-web JavaScript from the Passage CDN. -->
62+
<script src="https://cdn.passage.id/passage-web.js"></script>
63+
</body>
64+
</html>

‎02-Login-With-Profile/Dockerfile

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
FROM golang:1.15-alpine
2+
3+
WORKDIR /app
4+
5+
ADD . .
6+
7+
RUN go mod download && \
8+
go build
9+
10+
CMD ["./example-go"]

‎02-Login-With-Profile/EXAMPLE.env

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
PASSAGE_APP_ID=
2+
PASSAGE_API_KEY=
3+
PORT=5000

0 commit comments

Comments
 (0)