hotspot-login-page
v1.0.1
Published
hotspot login page to work with keycloak
Downloads
41
Maintainers
Readme
Keycloak Radius Hotspot
Setup social and other Oauth/Saml integration with Keycloak Radius embedded server
How Keycloak Radius Hotspot works
- Authorization through Keycloak occurs by OpenID Connect.
- User selects on the login page the identity provider through which he wants to log in
- The result of a successful authorization is a JWT that contains a temporary session key.
- With this key, the User is authorized through Radius Server.
- Radius Server checks if this key is in the user session. And whether it was used.
- Radius Server successfully authorizing the user
connection Schema`s
- Cloud connection (Better to Use Radsec)
- Proxy connection
Setup, build and configure HotSpot page for Social Login
- Create Realm
- create Radius Client
- create OpenId client
- Setting your Hotspot DNS in "Valid Redirect URIs" and "Web Origins"
- add "Radius Session Password" Mapper
- Download keycloak.json
Setup Mikrotik
- Upload all files from hotspot/mikrotik to flash/hotspot on device (authorization.js and login.html)
- Using web UI
- Using scp
- Using ftp
- Using winbox
- Download keycloak.json
- upload keycloak.json into flash/hotspot on device
- update Walled Garden. Add your keycloak host
Facebook Login example
- Install Keycloak with embedded Radius Server
- install ngrok. Register ngrok ./ngrok authtoken <YOUR TOKEN>
- start ngrok ./ngrok http 8090
- open keycloak goto realm and add Facebook Identity Provider
- Copy Redirect URI
- goto https://developers.facebook.com/ and create a new application
- Insert Redirect URI from Step 7
- Get App Id and Secret from application (Settings->basic)
- back to Keycloak and set this App Id and Secret
- add facebook hosts to Walled Garden
/ip hotspot walled-garden
add comment=facebook dst-host=facebook.*
add comment=facebook dst-host=*.facebook.*
add comment=facebook dst-host=*.fbcdn.*
add comment=facebook dst-host=*akamai*
add comment=facebook dst-host=*atdmt*
add comment=facebook dst-host=*fbsbx*
add comment=common dst-host=www.google-analytics.com
- open hotspot page
build UI
build UI Requirements:
node and npm must be installed
macbook instalation brew : brew install node
Install node on ubuntu
Building steps
- cd ./source
- npm i
- npm run build
result in ./mikrotik