diff --git a/404.html b/404.html index 73b3a427..816de393 100644 --- a/404.html +++ b/404.html @@ -9,7 +9,7 @@ - +
diff --git a/assets/js/6e881e32.2eecdb77.js b/assets/js/6e881e32.2eecdb77.js new file mode 100644 index 00000000..210b7784 --- /dev/null +++ b/assets/js/6e881e32.2eecdb77.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[182],{8214:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>l,frontMatter:()=>s,metadata:()=>a,toc:()=>h});var i=n(5893),o=n(1151);const s={},r="OAuth Public Frontend Configuration",a={id:"guides/self-hosting/oauth/configuring-oauth",title:"OAuth Public Frontend Configuration",description:"As of v0.4.7, zrok includes OAuth integration for both Google and GitHub for zrok access public public frontends.",source:"@site/../docs/guides/self-hosting/oauth/configuring-oauth.md",sourceDirName:"guides/self-hosting/oauth",slug:"/guides/self-hosting/oauth/configuring-oauth",permalink:"/docs/guides/self-hosting/oauth/configuring-oauth",draft:!1,unlisted:!1,editUrl:"https://github.com/openziti/zrok/blob/main/docs/../docs/guides/self-hosting/oauth/configuring-oauth.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"OAuth",permalink:"/docs/category/oauth"},next:{title:"Instance Config",permalink:"/docs/guides/self-hosting/instance-configuration"}},c={},h=[{value:"Planning for the OAuth Frontend",id:"planning-for-the-oauth-frontend",level:2},{value:"Configuring a Google OAuth Client ID",id:"configuring-a-google-oauth-client-id",level:2},{value:"OAuth Content Screen",id:"oauth-content-screen",level:3},{value:"Create the OAuth 2.0 Client ID",id:"create-the-oauth-20-client-id",level:3},{value:"Configuring a GitHub Client ID",id:"configuring-a-github-client-id",level:2},{value:"Configuring your Public Frontend",id:"configuring-your-public-frontend",level:2},{value:"Enabling OAuth on a Public Share",id:"enabling-oauth-on-a-public-share",level:2}];function d(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"oauth-public-frontend-configuration",children:"OAuth Public Frontend Configuration"}),"\n",(0,i.jsxs)(t.p,{children:["As of ",(0,i.jsx)(t.code,{children:"v0.4.7"}),", ",(0,i.jsx)(t.code,{children:"zrok"})," includes OAuth integration for both Google and GitHub for ",(0,i.jsx)(t.code,{children:"zrok access public"})," public frontends."]}),"\n",(0,i.jsx)(t.p,{children:"This integration allows you to create public shares and request that the public frontend authenticate your users against either the Google or GitHub OAuth endpoints (using the user's Google or GitHub accounts). Additionally, you can restrict the email address domain associated with the count to a list of domains that you provide when you create the share."}),"\n",(0,i.jsxs)(t.p,{children:["This is a first step towards a more comprehensive portfolio of user authentication strategies in future ",(0,i.jsx)(t.code,{children:"zrok"})," releases."]}),"\n",(0,i.jsx)(t.h2,{id:"planning-for-the-oauth-frontend",children:"Planning for the OAuth Frontend"}),"\n",(0,i.jsx)(t.p,{children:"The current implementation of the OAuth public frontend uses a HTTP listener to handle redirects from OAuth providers. You'll need to configure a DNS name and a port for this listener that is accessible by your end users. We'll refer to this listener as the \"OAuth frontend\" in this guide."}),"\n",(0,i.jsx)(t.p,{children:'We\'ll use the public DNS address of the OAuth frontend when creating the Google and GitHub OAuth clients below. This address is typically configured into these clients as the "redirect URL" where these clients will send the authenticated users after authentication.'}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"zrok"})," OAuth frontend will capture the successful authentication and forward the user back to their original destination."]}),"\n",(0,i.jsx)(t.h2,{id:"configuring-a-google-oauth-client-id",children:"Configuring a Google OAuth Client ID"}),"\n",(0,i.jsx)(t.h3,{id:"oauth-content-screen",children:"OAuth Content Screen"}),"\n",(0,i.jsx)(t.p,{children:'Before you can configure an OAuth Client ID in Google Cloud, you have to configure the "OAuth content screen".'}),"\n",(0,i.jsxs)(t.p,{children:["In the Google Cloud console, navigate to: ",(0,i.jsx)(t.code,{children:"APIs & Services > Credentials > OAuth content screen"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(7199).Z+"",width:"1469",height:"1141"})}),"\n",(0,i.jsxs)(t.p,{children:["Here you can give your ",(0,i.jsx)(t.code,{children:"zrok"})," public frontend an identity and branding to match your deployment."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(2795).Z+"",width:"1469",height:"1141"})}),"\n",(0,i.jsx)(t.p,{children:"Describe what domains are authorized to access your public frontend and establish contact information."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(3923).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:["Add a non-sensitive scope for ",(0,i.jsx)(t.code,{children:"../auth/userinfo.email"}),". This is important as it allows the ",(0,i.jsx)(t.code,{children:"zrok"})," OAuth frontend to receive the email address of the authenticated user."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(2575).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(72).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsx)(t.p,{children:"Now your OAuth content screen is configured."}),"\n",(0,i.jsx)(t.h3,{id:"create-the-oauth-20-client-id",children:"Create the OAuth 2.0 Client ID"}),"\n",(0,i.jsx)(t.p,{children:"Next we create the OAuth Client ID for your public frontend."}),"\n",(0,i.jsxs)(t.p,{children:["In the Google Cloud Console, navigate to: ",(0,i.jsx)(t.code,{children:"APIs & Services > Credentials > + Create Credentials"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(5180).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:["Select ",(0,i.jsx)(t.code,{children:"OAuth client ID"})," from the ",(0,i.jsx)(t.code,{children:"+ Create Credentials"})," dropdown."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(5871).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:["Application type is ",(0,i.jsx)(t.code,{children:"Web Application"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(9572).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:['The most important bit here is the "Authorized redirect URIs". You\'re going to want to put a URL here that matches the ',(0,i.jsx)(t.code,{children:"zrok"})," OAuth frontend address that you configured at the start of this guide, but at the end of the URL you're going to append ",(0,i.jsx)(t.code,{children:"/google/oauth"})," to the URL."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(1115).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:["Save the client ID and the client secret. You'll configure these into your ",(0,i.jsx)(t.code,{children:"frontend.yml"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"With this your Google OAuth client should be configured and ready."}),"\n",(0,i.jsx)(t.h2,{id:"configuring-a-github-client-id",children:"Configuring a GitHub Client ID"}),"\n",(0,i.jsx)(t.p,{children:"Register a new OAuth application through the GitHub settings for the account that owns the application."}),"\n",(0,i.jsxs)(t.p,{children:["Navigate to:",(0,i.jsx)(t.code,{children:"Settings > Developer Settings > OAuth Apps > Register a new application"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(9980).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(4861).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:['The "Authorized callback URL" should be configured to match the OAuth frontend address you configured at the start of this guide, with ',(0,i.jsx)(t.code,{children:"/github/oauth"})," appended to the end."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(5758).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsx)(t.p,{children:"Create a new client secret."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(1995).Z+"",width:"1469",height:"1179"})}),"\n",(0,i.jsxs)(t.p,{children:["Save the client ID and the client secret. You'll configure these into your ",(0,i.jsx)(t.code,{children:"frontend.yml"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"configuring-your-public-frontend",children:"Configuring your Public Frontend"}),"\n",(0,i.jsxs)(t.p,{children:["The public frontend configuration includes a new ",(0,i.jsx)(t.code,{children:"oauth"})," section:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-yaml",children:'oauth:\n bind_address: 0.0.0.0:8181\n redirect_url: https://oauth.zrok.io\n cookie_domain: zrok.io\n hash_key: "the quick brown fox jumped over the lazy dog"\n providers:\n - name: google\n client_id: "You can limit access to certain email addresses with OAuth or require a password.
You can require that visitors authenticate with an email address that matches at least one of the suffixes you specify. Add the following to the configuration file.
-ZROK_OAUTH_PROVIDER="github" # or google
ZROK_OAUTH_EMAILS="bob@example.com @acme.example.com"
ZROK_OAUTH_PROVIDER="github" # or google
ZROK_OAUTH_EMAILS="alice@example.com *@acme.example.com"
Enable HTTP basic authentication by adding the following to the configuration file.
ZROK_BASIC_AUTH="user:passwd"
You can allow specific email addresses or an email domain by setting ZROK_OAUTH_PROVIDER to github or google and
ZROK_SHARE_OPTS to specify additional command-line options to zrok reserve public. Read more about the OAuth
features in this blog post.
ZROK_OAUTH_PROVIDER="github"
ZROK_SHARE_OPTS="--oauth-email-domains @example.com"
ZROK_OAUTH_PROVIDER="github"
ZROK_OAUTH_EMAILS="alice@example.com *@acme.example.com"
The reserved public share project uses zrok's default backend mode, proxy. Another backend mode, caddy, accepts a path to a Caddyfile as the value of ZROK_TARGET (zrok Caddyfile examples).
Caddy is the most powerful and flexible backend mode in zrok. You must reserve a new public subdomain whenever you switch the backend mode, so using caddy reduces the risk that you'll have to share a new frontend URL with your users.
You can allow specific email addresses or an email domain by setting ZROK_OAUTH_PROVIDER to github or google and
ZROK_SHARE_OPTS to specify additional command-line options to zrok reserve public. Read more about the OAuth
features in this blog post.
ZROK_OAUTH_PROVIDER="github"
ZROK_SHARE_OPTS="--oauth-email-domains @example.com"
ZROK_OAUTH_PROVIDER="github"
ZROK_OAUTH_EMAILS="alice@example.com *@acme.example.com"
The reserved public share project uses zrok's default backend mode, proxy. Another backend mode, caddy, accepts a path to a Caddyfile as the value of ZROK_TARGET (zrok Caddyfile examples).
Caddy is the most powerful and flexible backend mode in zrok. You must reserve a new public subdomain whenever you switch the backend mode, so using caddy reduces the risk that you'll have to share a new frontend URL with your users.
Both the google and github providers accept a client_id and client_secret parameter. These values are provided when you configure the OAuth clients at Google or GitHub.
With your public frontend configured to support OAuth, you can test this by creating a public share. There are new command line options to support this:
-$ zrok share public
Error: accepts 1 arg(s), received 0
Usage:
zrok share public <target> [flags]
Flags:
-b, --backend-mode string The backend mode {proxy, web, caddy, drive} (default "proxy")
--basic-auth stringArray Basic authentication users (<username:password>,...)
--frontends stringArray Selected frontends to use for the share (default [public])
--headless Disable TUI and run headless
-h, --help help for public
--insecure Enable insecure TLS certificate validation for <target>
--oauth-check-interval duration Maximum lifetime for OAuth authentication; reauthenticate after expiry (default 3h0m0s)
--oauth-email-domains stringArray Allow only these email domains to authenticate via OAuth
--oauth-provider string Enable OAuth provider [google, github]
Global Flags:
-p, --panic Panic instead of showing pretty errors
-v, --verbose Enable verbose logging
$ zrok share public --help
Share a target resource publicly
Usage:
zrok share public <target> [flags]
Flags:
-b, --backend-mode string The backend mode {proxy, web, caddy, drive} (default "proxy")
--basic-auth stringArray Basic authentication users (<username:password>,...)
--frontends stringArray Selected frontends to use for the share (default [public])
--headless Disable TUI and run headless
-h, --help help for public
--insecure Enable insecure TLS certificate validation for <target>
--oauth-check-interval duration Maximum lifetime for OAuth authentication; reauthenticate after expiry (default 3h0m0s)
--oauth-email-address-patterns stringArray Allow only these email domain globs to authenticate via OAuth
--oauth-provider string Enable OAuth provider [google, github]
Global Flags:
-p, --panic Panic instead of showing pretty errors
-v, --verbose Enable verbose logging
The --oauth-provider flag enables OAuth for the share using the specified provider.
The --oauth-email-domains flag accepts a comma-separated list of authenticated email address domains that are allowed to access the share.
The --oauth-email-address-patterns flag accepts a single glob pattern that matches an authenticated email address that is allowed to access the share. Use this flag multiple times to allow different patterns.
The --oauth-check-interval flag specifies how frequently the authentication must be checked.
An example public share:
-zrok share public --backend-mode web --oauth-provider github --oauth-email-domains zrok.io ~/public
zrok share public --backend-mode web --oauth-provider github --oauth-email-address-patterns '*@zrok.io' ~/public