google auth instead of explorer auth

main
Joost Wooning 2021-07-29 18:02:02 +02:00
parent 0ce944f776
commit 2a0370aa58
11 changed files with 723 additions and 151 deletions

View File

@ -1 +1,2 @@
REACT_APP_VIDEO_CDN=https://cabana-video-development.azureedge.net
BROWSER=none
REACT_APP_VIDEO_CDN=https://cabana-video-development.azureedge.net

View File

@ -1 +1,2 @@
REACT_APP_VIDEO_CDN=https://cabana-video.azureedge.net
BROWSER=none
REACT_APP_VIDEO_CDN=https://cabana-video.azureedge.net

View File

@ -1 +1,2 @@
REACT_APP_VIDEO_CDN=https://cabana-video-staging.azureedge.net
BROWSER=none
REACT_APP_VIDEO_CDN=https://cabana-video-staging.azureedge.net

View File

@ -4,10 +4,10 @@
"private": true,
"homepage": "https://community.comma.ai/cabana",
"dependencies": {
"@commaai/comma-api": "^1.3.1",
"@commaai/comma-api": "^1.7.0",
"@commaai/hls.js": "^0.12.7",
"@commaai/log_reader": "^0.5.5",
"@commaai/my-comma-auth": "^1.1.4",
"@commaai/my-comma-auth": "^1.3.0",
"@commaai/pandajs": "^0.3.4",
"@craco/craco": "^5.5.0",
"ap": "^0.2.0",
@ -16,7 +16,6 @@
"base64-inline-loader": "^1.1.0",
"classnames": "^2.2.5",
"clipboard": "^1.7.1",
"config-request": "^0.5.1",
"core-js": "^2.4.1",
"create-react-class": "^15.5.3",
"cuint": "^0.2.2",
@ -63,6 +62,7 @@
"thyming": "^0.1.1",
"vega": "^5.3.4",
"vega-lite": "^3.0.0",
"query-string": "^5.0.1",
"vega-tooltip": "^0.4.0"
},
"devDependencies": {
@ -80,9 +80,10 @@
"env-cmd": "^8.0.2",
"gh-pages": "^2.1.1",
"http-proxy-middleware": "0.17.3",
"jest-puppeteer": "^4.3.0",
"json-loader": "0.5.4",
"puppeteer": "^1.20.0",
"expect-puppeteer": "^5.0.4",
"jest-puppeteer": "^5.0.4",
"puppeteer": "^9.1.0",
"rimraf": "^3.0.0",
"serve-handler": "^6.1.2",
"url-toolkit": "^2.1.1",

41
public/404.html 100644
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// https://github.com/rafrex/spa-github-pages
// Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
// ----------------------------------------------------------------------
// This script takes the current url and converts the path and query
// string into just a query string, and then redirects the browser
// to the new url with only a query string and hash fragment,
// e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
// http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
// Note: this 404.html file must be at least 512 bytes for it to work
// with Internet Explorer (it is currently > 512 bytes)
// If you're creating a Project Pages site and NOT using a custom domain,
// then set segmentCount to 1 (enterprise users may need to set it to > 1).
// This way the code will only replace the route part of the path, and not
// the real directory in which the app resides, for example:
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
// https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
// Otherwise, leave segmentCount as 0.
var segmentCount = 1;
var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
(l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>

View File

@ -29,6 +29,38 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>comma.ai cabana</title>
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// https://github.com/rafrex/spa-github-pages
// Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
// ----------------------------------------------------------------------
// This script checks to see if a redirect is present in the query string
// and converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
if (l.search) {
var q = {};
l.search.slice(1).split('&').forEach(function(v) {
var a = v.split('=');
q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
});
if (q.p !== undefined) {
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + (q.p || '') +
(q.q ? ('?' + q.q) : '') +
l.hash
);
}
}
}(window.location))
</script>
<!-- End Single Page Apps for GitHub Pages -->
</head>
<body>
<noscript>

View File

@ -29,7 +29,7 @@ describe('demo mode', () => {
height,
deviceScaleFactor: 1,
});
await page.goto('localhost:3002/?demo=1');
await page.goto('http://localhost:3002/?demo=1');
// wait 5 seconds for the data to start loading...
await delay(10000);

View File

@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
import Moment from 'moment';
import _ from 'lodash';
import cx from 'classnames';
import CommaAuth from '@commaai/my-comma-auth';
import qs from 'query-string';
import CommaAuth, { config as AuthConfig } from '@commaai/my-comma-auth';
import { EXPLORER_URL } from '../../config';
import Modal from './baseModal';
@ -80,20 +81,29 @@ export default class OnboardingModal extends Component {
}
renderLogin() {
return (
<button
onClick={this.navigateToExplorer}
className="button--primary button--kiosk"
>
<i className="fa fa-video-camera" />
<strong>
{CommaAuth.isAuthenticated()
? 'Find a drive in Explorer'
: 'Log in with Explorer'}
</strong>
<sup>Click "View CAN Data" while replaying a drive</sup>
</button>
);
if (CommaAuth.isAuthenticated()) {
return (
<button onClick={this.navigateToExplorer} className="button--primary button--kiosk">
<i className="fa fa-video-camera" />
<strong>Find a drive in Explorer</strong>
<sup>Click "View CAN Data" while replaying a drive</sup>
</button>
);
} else {
let redirectOrigin = 'http://127.0.0.1';
if (document.location) {
redirectOrigin = document.location.origin;
}
const params = AuthConfig.GOOGLE_OAUTH_PARAMS;
params.redirect_uri = redirectOrigin + '/cabana' + AuthConfig.GOOGLE_REDIRECT_PATH;
const redirectLink = [AuthConfig.GOOGLE_AUTH_ENDPOINT, qs.stringify(params)].join('?')
return (
<a href={ redirectLink } className="button button--primary button--kiosk">
<i className="fa fa-google" />
<strong>Sign in with Google</strong>
</a>
);
}
}
renderOnboardingOptions() {

View File

@ -29,6 +29,6 @@ export const STREAMING_WINDOW = 60;
const ENV_EXPLORER_URL = {
debug: 'http://127.0.0.1:3000/',
prod: 'https://my.comma.ai/'
prod: 'https://connect.comma.ai/'
};
export const EXPLORER_URL = ENV_EXPLORER_URL[ENV];

View File

@ -1,7 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import CommaAuth from '@commaai/my-comma-auth';
import { request as Request } from '@commaai/comma-api';
import qs from 'query-string';
import CommaAuth, { config as AuthConfig, storage as AuthStorage } from '@commaai/my-comma-auth';
import { auth as AuthApi, request as Request } from '@commaai/comma-api';
import Sentry from './logging/Sentry';
import CanExplorer from './CanExplorer';
import AcuraDbc from './acura-dbc';
@ -14,6 +15,26 @@ import {
} from './api/localstorage';
import { demoProps } from './demo';
async function authenticate() {
if (document.location && document.location.pathname === '/cabana' + AuthConfig.GOOGLE_REDIRECT_PATH) {
const redirect_uri = document.location.origin + '/cabana' + AuthConfig.GOOGLE_REDIRECT_PATH;
try {
const { code } = qs.parse(document.location.search);
const token = await AuthApi.refreshAccessToken(code, redirect_uri, 'google');
if (token) {
AuthStorage.setCommaAccessToken(token);
}
} catch (err) {
console.log(err);
}
}
const token = await CommaAuth.init();
if (token) {
Request.configure(token);
}
}
export default function init() {
Sentry.init();
@ -85,12 +106,10 @@ export default function init() {
}
async function renderDom() {
const token = await CommaAuth.init();
if (token) {
Request.configure(token);
}
ReactDOM.render(<CanExplorer {...props} />, document.getElementById('root')); // eslint-disable-line react/jsx-props-no-spreading
}
renderDom();
authenticate().then(() => {
renderDom();
});
}

704
yarn.lock

File diff suppressed because it is too large Load Diff