mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
Use IndieAuth for client ID (#1427)
* Use IndieAuth for client ID * Lint
This commit is contained in:
parent
13819937a7
commit
2e4ddebcda
@ -35,7 +35,6 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
|
||||
return {
|
||||
authProvider: Object,
|
||||
clientId: String,
|
||||
clientSecret: String,
|
||||
redirectUri: String,
|
||||
oauth2State: String,
|
||||
_state: {
|
||||
@ -54,10 +53,8 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
|
||||
|
||||
fetch('/auth/login_flow', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Basic ${btoa(`${this.clientId}:${this.clientSecret}`)}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
client_id: this.clientId,
|
||||
handler: [this.authProvider.type, this.authProvider.id],
|
||||
redirect_uri: this.redirectUri,
|
||||
})
|
||||
@ -89,12 +86,13 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
|
||||
}
|
||||
this._state = 'loading';
|
||||
|
||||
const postData = Object.assign({}, this._stepData, {
|
||||
client_id: this.clientId,
|
||||
});
|
||||
|
||||
fetch(`/auth/login_flow/${this._step.flow_id}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Basic ${btoa(`${this.clientId}:${this.clientSecret}`)}`
|
||||
},
|
||||
body: JSON.stringify(this._stepData)
|
||||
body: JSON.stringify(postData)
|
||||
}).then((response) => {
|
||||
if (!response.ok) throw new Error();
|
||||
return response.json();
|
||||
|
@ -45,17 +45,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
|
||||
},
|
||||
authProviders: Array,
|
||||
clientId: String,
|
||||
clientSecret: String,
|
||||
};
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
fetch('/auth/providers', {
|
||||
headers: {
|
||||
Authorization: `Basic ${btoa(`${this.clientId}:${this.clientSecret}`)}`
|
||||
}
|
||||
}).then((response) => {
|
||||
fetch('/auth/providers').then((response) => {
|
||||
if (!response.ok) throw new Error();
|
||||
return response.json();
|
||||
}).then((authProviders) => {
|
||||
|
@ -1,12 +1,10 @@
|
||||
export default function fetchToken(clientId, code) {
|
||||
const data = new FormData();
|
||||
data.append('client_id', clientId);
|
||||
data.append('grant_type', 'authorization_code');
|
||||
data.append('code', code);
|
||||
return fetch('/auth/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
authorization: `Basic ${btoa(clientId)}`
|
||||
},
|
||||
body: data,
|
||||
}).then((resp) => {
|
||||
if (!resp.ok) throw new Error('Unable to fetch tokens');
|
||||
|
@ -1,12 +1,10 @@
|
||||
export default function refreshAccessToken(clientId, refreshToken) {
|
||||
const data = new FormData();
|
||||
data.append('client_id', clientId);
|
||||
data.append('grant_type', 'refresh_token');
|
||||
data.append('refresh_token', refreshToken);
|
||||
return fetch('/auth/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
authorization: `Basic ${btoa(clientId)}`
|
||||
},
|
||||
body: data,
|
||||
}).then((resp) => {
|
||||
if (!resp.ok) throw new Error('Unable to fetch tokens');
|
||||
|
@ -19,11 +19,22 @@ class HaAuthorize extends PolymerElement {
|
||||
<div class="layout vertical center fit">
|
||||
<img src="/static/icons/favicon-192x192.png" height="192">
|
||||
|
||||
<p>Logging in to <b>[[clientId]]</b>.</p>
|
||||
|
||||
<template is="dom-if" if="[[_authProvider]]">
|
||||
<ha-auth-flow client-id="[[clientId]]" client-secret="[[clientSecret]]" redirect-uri="[[redirectUri]]" oauth2-state="[[oauth2State]]" auth-provider="[[_authProvider]]" on-reset="_handleReset">
|
||||
</ha-auth-flow></template>
|
||||
<ha-auth-flow
|
||||
client-id="[[clientId]]"
|
||||
redirect-uri="[[redirectUri]]"
|
||||
oauth2-state="[[oauth2State]]"
|
||||
auth-provider="[[_authProvider]]"
|
||||
on-reset="_handleReset"
|
||||
></ha-auth-flow>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!_authProvider]]">
|
||||
<ha-pick-auth-provider client-id="[[clientId]]" client-secret="[[clientSecret]]" on-pick="_handleAuthProviderPick"></ha-pick-auth-provider>
|
||||
<ha-pick-auth-provider
|
||||
client-id="[[clientId]]"
|
||||
on-pick="_handleAuthProviderPick"
|
||||
></ha-pick-auth-provider>
|
||||
</template>
|
||||
</div>
|
||||
`;
|
||||
@ -36,7 +47,6 @@ class HaAuthorize extends PolymerElement {
|
||||
value: null,
|
||||
},
|
||||
clientId: String,
|
||||
clientSecret: String,
|
||||
redirectUri: String,
|
||||
oauth2State: String,
|
||||
};
|
||||
@ -53,7 +63,6 @@ class HaAuthorize extends PolymerElement {
|
||||
}
|
||||
const props = {};
|
||||
if (query.client_id) props.clientId = query.client_id;
|
||||
if (query.client_secret) props.clientSecret = query.client_secret;
|
||||
if (query.redirect_uri) props.redirectUri = query.redirect_uri;
|
||||
if (query.state) props.oauth2State = query.state;
|
||||
this.setProperties(props);
|
||||
|
@ -28,19 +28,23 @@ const init = window.createHassConnection = function (password, accessToken) {
|
||||
});
|
||||
};
|
||||
|
||||
function clientId() {
|
||||
return `${location.protocol}//${location.host}/`;
|
||||
}
|
||||
|
||||
function redirectLogin() {
|
||||
document.location = `${__PUBLIC_PATH__}authorize.html?response_type=code&client_id=${window.clientId}&redirect_uri=/`;
|
||||
document.location = `${__PUBLIC_PATH__}authorize.html?response_type=code&client_id=${encodeURIComponent(clientId())}&redirect_uri=${encodeURIComponent(location.toString())}`;
|
||||
}
|
||||
|
||||
window.refreshToken = () =>
|
||||
refreshToken_(window.clientId, window.tokens.refresh_token).then((accessTokenResp) => {
|
||||
refreshToken_(clientId(), window.tokens.refresh_token).then((accessTokenResp) => {
|
||||
window.tokens.access_token = accessTokenResp.access_token;
|
||||
localStorage.tokens = JSON.stringify(window.tokens);
|
||||
return accessTokenResp.access_token;
|
||||
}, () => redirectLogin());
|
||||
|
||||
function resolveCode(code) {
|
||||
fetchToken(window.clientId, code).then((tokens) => {
|
||||
fetchToken(clientId(), code).then((tokens) => {
|
||||
localStorage.tokens = JSON.stringify(tokens);
|
||||
// Refresh the page and have tokens in place.
|
||||
document.location = location.pathname;
|
||||
|
Loading…
x
Reference in New Issue
Block a user