commit: 1db3c785d805bfe1e7bb09f2d85875448cb03f9a
parent: 1fc460a7a518f9a33e5b453070dc57e9e463fda1
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sun, 16 Jun 2019 11:18:21 +0000
Merge branch 'masto-register-app-secret' into 'develop'
Proper clientId/secret/token caching, MastoAPI registration
Closes #554
See merge request pleroma/pleroma-fe!806
Diffstat:
10 files changed, 156 insertions(+), 91 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,8 +31,7 @@ module.exports = {
'vue/require-prop-types': 1,
'vue/no-use-v-if-with-v-for': 1,
'indent': 1,
- 'import/first': 1, // ????
- 'import-first': 1,
+ 'import/first': 1,
'object-curly-spacing': 1,
'prefer-promise-reject-errors': 1,
'eol-last': 1,
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -3,6 +3,8 @@ import VueRouter from 'vue-router'
import routes from './routes'
import App from '../App.vue'
import { windowWidth } from '../services/window_utils/window_utils'
+import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
+import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
const getStatusnetConfig = async ({ store }) => {
try {
@@ -188,6 +190,17 @@ const getCustomEmoji = async ({ store }) => {
}
}
+const getAppSecret = async ({ store }) => {
+ const { state, commit } = store
+ const { oauth, instance } = state
+ return getOrCreateApp({ ...oauth, instance: instance.server, commit })
+ .then((app) => getClientToken({ ...app, instance: instance.server }))
+ .then((token) => {
+ commit('setAppToken', token.access_token)
+ commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+ })
+}
+
const getNodeInfo = async ({ store }) => {
try {
const res = await window.fetch('/nodeinfo/2.0.json')
@@ -228,14 +241,14 @@ const setConfig = async ({ store }) => {
const apiConfig = configInfos[0]
const staticConfig = configInfos[1]
- await setSettings({ store, apiConfig, staticConfig })
+ await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
}
const checkOAuthToken = async ({ store }) => {
return new Promise(async (resolve, reject) => {
- if (store.state.oauth.token) {
+ if (store.getters.getUserToken()) {
try {
- await store.dispatch('loginUser', store.state.oauth.token)
+ await store.dispatch('loginUser', store.getters.getUserToken())
} catch (e) {
console.log(e)
}
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
@@ -26,23 +26,30 @@ const LoginForm = {
this.isTokenAuth ? this.submitToken() : this.submitPassword()
},
submitToken () {
- oauthApi.login({
- oauth: this.oauth,
+ const { clientId } = this.oauth
+ const data = {
+ clientId,
instance: this.instance.server,
commit: this.$store.commit
- })
+ }
+
+ oauthApi.getOrCreateApp(data)
+ .then((app) => { oauthApi.login({ ...app, ...data }) })
},
submitPassword () {
+ const { clientId } = this.oauth
const data = {
+ clientId,
oauth: this.oauth,
- instance: this.instance.server
+ instance: this.instance.server,
+ commit: this.$store.commit
}
this.error = false
oauthApi.getOrCreateApp(data).then((app) => {
oauthApi.getTokenWithCredentials(
{
- app,
+ ...app,
instance: data.instance,
username: this.user.username,
password: this.user.password
diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js
@@ -4,14 +4,16 @@ const oac = {
props: ['code'],
mounted () {
if (this.code) {
+ const { clientId } = this.$store.state.oauth
+
oauth.getToken({
- app: this.$store.state.oauth,
+ clientId,
instance: this.$store.state.instance.server,
code: this.code
}).then((result) => {
this.$store.commit('setToken', result.access_token)
this.$store.dispatch('loginUser', result.access_token)
- this.$router.push({name: 'friends'})
+ this.$router.push({ name: 'friends' })
})
}
}
diff --git a/src/modules/oauth.js b/src/modules/oauth.js
@@ -1,16 +1,39 @@
const oauth = {
state: {
- client_id: false,
- client_secret: false,
- token: false
+ clientId: false,
+ clientSecret: false,
+ /* App token is authentication for app without any user, used mostly for
+ * MastoAPI's registration of new users, stored so that we can fall back to
+ * it on logout
+ */
+ appToken: false,
+ /* User token is authentication for app with user, this is for every calls
+ * that need authorized user to be successful (i.e. posting, liking etc)
+ */
+ userToken: false
},
mutations: {
- setClientData (state, data) {
- state.client_id = data.client_id
- state.client_secret = data.client_secret
+ setClientData (state, { clientId, clientSecret }) {
+ state.clientId = clientId
+ state.clientSecret = clientSecret
+ },
+ setAppToken (state, token) {
+ state.appToken = token
},
setToken (state, token) {
- state.token = token
+ state.userToken = token
+ }
+ },
+ getters: {
+ getToken: state => () => {
+ // state.token is userToken with older name, coming from persistent state
+ // added here for smoother transition, otherwise user will be logged out
+ return state.userToken || state.token || state.appToken
+ },
+ getUserToken: state => () => {
+ // state.token is userToken with older name, coming from persistent state
+ // added here for smoother transition, otherwise user will be logged out
+ return state.userToken || state.token
}
}
}
diff --git a/src/modules/users.js b/src/modules/users.js
@@ -3,7 +3,6 @@ import userSearchApi from '../services/new_api/user_search.js'
import { compact, map, each, merge, last, concat, uniq } from 'lodash'
import { set } from 'vue'
import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
-import oauthApi from '../services/new_api/oauth'
import { humanizeErrors } from './errors'
// TODO: Unify with mergeOrAdd in statuses.js
@@ -368,31 +367,21 @@ const users = {
let rootState = store.rootState
- let response = await rootState.api.backendInteractor.register(userInfo)
- if (response.ok) {
- const data = {
- oauth: rootState.oauth,
- instance: rootState.instance.server
- }
- let app = await oauthApi.getOrCreateApp(data)
- let result = await oauthApi.getTokenWithCredentials({
- app,
- instance: data.instance,
- username: userInfo.username,
- password: userInfo.password
- })
+ try {
+ let data = await rootState.api.backendInteractor.register(userInfo)
store.commit('signUpSuccess')
- store.commit('setToken', result.access_token)
- store.dispatch('loginUser', result.access_token)
- } else {
- const data = await response.json()
- let errors = JSON.parse(data.error)
+ store.commit('setToken', data.access_token)
+ store.dispatch('loginUser', data.access_token)
+ } catch (e) {
+ let errors = e.message
// replace ap_id with username
- if (errors.ap_id) {
- errors.username = errors.ap_id
- delete errors.ap_id
+ if (typeof errors === 'object') {
+ if (errors.ap_id) {
+ errors.username = errors.ap_id
+ delete errors.ap_id
+ }
+ errors = humanizeErrors(errors)
}
- errors = humanizeErrors(errors)
store.commit('signUpFailure', errors)
throw Error(errors)
}
@@ -406,7 +395,7 @@ const users = {
store.dispatch('disconnectFromChat')
store.commit('setToken', false)
store.dispatch('stopFetching', 'friends')
- store.commit('setBackendInteractor', backendInteractorService())
+ store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
store.dispatch('stopFetching', 'notifications')
store.commit('clearNotifications')
store.commit('resetStatuses')
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
@@ -1,5 +1,4 @@
/* eslint-env browser */
-const REGISTRATION_URL = '/api/account/register.json'
const BG_UPDATE_URL = '/api/qvitter/update_background_image.json'
const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
@@ -25,6 +24,7 @@ const MFA_CONFIRM_OTP_URL = '/api/pleroma/profile/mfa/confirm/totp'
const MFA_DISABLE_OTP_URL = '/api/pleroma/profile/mfa/totp'
const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
+const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
const GET_BACKGROUND_HACK = '/api/account/verify_credentials.json'
const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
@@ -185,19 +185,29 @@ const updateProfile = ({credentials, params}) => {
// homepage
// location
// token
-const register = (params) => {
- const form = new FormData()
-
- each(params, (value, key) => {
- if (value) {
- form.append(key, value)
- }
- })
-
- return fetch(REGISTRATION_URL, {
+const register = ({ params, credentials }) => {
+ const { nickname, ...rest } = params
+ return fetch(MASTODON_REGISTRATION_URL, {
method: 'POST',
- body: form
+ headers: {
+ ...authHeaders(credentials),
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ nickname,
+ locale: 'en_US',
+ agreement: true,
+ ...rest
+ })
})
+ .then((response) => [response.ok, response])
+ .then(([ok, response]) => {
+ if (ok) {
+ return response.json()
+ } else {
+ return response.json().then((error) => { throw new Error(error) })
+ }
+ })
}
const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -103,7 +103,7 @@ const backendInteractorService = (credentials) => {
const unpinOwnStatus = (id) => apiService.unpinOwnStatus({credentials, id})
const getCaptcha = () => apiService.getCaptcha()
- const register = (params) => apiService.register(params)
+ const register = (params) => apiService.register({ credentials, params })
const updateAvatar = ({avatar}) => apiService.updateAvatar({credentials, avatar})
const updateBg = ({params}) => apiService.updateBg({credentials, params})
const updateBanner = ({banner}) => apiService.updateBanner({credentials, banner})
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
@@ -1,51 +1,57 @@
-import {reduce} from 'lodash'
+import { reduce } from 'lodash'
+
+const REDIRECT_URI = `${window.location.origin}/oauth-callback`
+
+export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) => {
+ if (clientId && clientSecret) {
+ return Promise.resolve({ clientId, clientSecret })
+ }
-const getOrCreateApp = ({oauth, instance}) => {
const url = `${instance}/api/v1/apps`
const form = new window.FormData()
- form.append('client_name', `PleromaFE_${Math.random()}`)
- form.append('redirect_uris', `${window.location.origin}/oauth-callback`)
+ form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
+ form.append('redirect_uris', REDIRECT_URI)
form.append('scopes', 'read write follow')
return window.fetch(url, {
method: 'POST',
body: form
- }).then((data) => data.json())
+ })
+ .then((data) => data.json())
+ .then((app) => ({ clientId: app.client_id, clientSecret: app.client_secret }))
+ .then((app) => commit('setClientData', app) || app)
}
-const login = (args) => {
- getOrCreateApp(args).then((app) => {
- args.commit('setClientData', app)
-
- const data = {
- response_type: 'code',
- client_id: app.client_id,
- redirect_uri: app.redirect_uri,
- scope: 'read write follow'
- }
- const dataString = reduce(data, (acc, v, k) => {
- const encoded = `${k}=${encodeURIComponent(v)}`
- if (!acc) {
- return encoded
- } else {
- return `${acc}&${encoded}`
- }
- }, false)
+const login = ({ instance, clientId }) => {
+ const data = {
+ response_type: 'code',
+ client_id: clientId,
+ redirect_uri: REDIRECT_URI,
+ scope: 'read write follow'
+ }
+
+ const dataString = reduce(data, (acc, v, k) => {
+ const encoded = `${k}=${encodeURIComponent(v)}`
+ if (!acc) {
+ return encoded
+ } else {
+ return `${acc}&${encoded}`
+ }
+ }, false)
- // Do the redirect...
- const url = `${args.instance}/oauth/authorize?${dataString}`
+ // Do the redirect...
+ const url = `${instance}/oauth/authorize?${dataString}`
- window.location.href = url
- })
+ window.location.href = url
}
-const getTokenWithCredentials = ({app, instance, username, password}) => {
+const getTokenWithCredentials = ({ clientId, clientSecret, instance, username, password }) => {
const url = `${instance}/oauth/token`
const form = new window.FormData()
- form.append('client_id', app.client_id)
- form.append('client_secret', app.client_secret)
+ form.append('client_id', clientId)
+ form.append('client_secret', clientSecret)
form.append('grant_type', 'password')
form.append('username', username)
form.append('password', password)
@@ -56,12 +62,12 @@ const getTokenWithCredentials = ({app, instance, username, password}) => {
}).then((data) => data.json())
}
-const getToken = ({app, instance, code}) => {
+const getToken = ({ clientId, clientSecret, instance, code }) => {
const url = `${instance}/oauth/token`
const form = new window.FormData()
- form.append('client_id', app.client_id)
- form.append('client_secret', app.client_secret)
+ form.append('client_id', clientId)
+ form.append('client_secret', clientSecret)
form.append('grant_type', 'authorization_code')
form.append('code', code)
form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
@@ -69,6 +75,22 @@ const getToken = ({app, instance, code}) => {
return window.fetch(url, {
method: 'POST',
body: form
+ })
+ .then((data) => data.json())
+}
+
+export const getClientToken = ({ clientId, clientSecret, instance }) => {
+ const url = `${instance}/oauth/token`
+ const form = new window.FormData()
+
+ form.append('client_id', clientId)
+ form.append('client_secret', clientSecret)
+ form.append('grant_type', 'client_credentials')
+ form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
+
+ return window.fetch(url, {
+ method: 'POST',
+ body: form
}).then((data) => data.json())
}
const verifyOTPCode = ({app, instance, mfaToken, code}) => {
diff --git a/src/services/new_api/utils.js b/src/services/new_api/utils.js
@@ -5,9 +5,9 @@ const queryParams = (params) => {
}
const headers = (store) => {
- const accessToken = store.state.oauth.token
+ const accessToken = store.getters.getToken()
if (accessToken) {
- return {'Authorization': `Bearer ${accessToken}`}
+ return { 'Authorization': `Bearer ${accessToken}` }
} else {
return {}
}
